Jquery / jquery 變數概念- 儲存修改與判斷

My tip

如果看不到codepen playground，請重新整理頁面

See the Pen 你的 CodePen 標題 by Retsnom on CodePen.

---

index.html

<div class="count">
  <div class="minus">-</div>
  <div class="num"></div>
  <div class="add">+</div>
  <div class="text">警示訊息</div>
  <div class="fill_stock">☎ 請點此聯絡廠商預約存貨</div>
</div>

style.sass

*
  // border: solid 1px
  font-family: 微軟正黑體
html,body
  width: 100%
  height: 100%
  padding: 0px
  margin: 0px
  background-color: #333
.count
  position: absolute
  left: 50%
  top: 50%
  transform: translateX(-50%) translateY(-50%)
  border: solid 2px white
  color: white
  padding-top: 10px
.minus,.num,.add,.count
  display: inline-block
  font-size: 50px
.minus,.num,.add
  padding-left: 10px
  padding-right: 10px
  cursor: pointer
.minus,.add
  user-select: none
  transition: 0.3s
  &:hover
    background-color: #eee
    color: #333
.num
  width: 50px
  text-align: center
.text
  font-size: 14px
  text-align: center
  padding-top: 10px
  padding-bottom: 10px
  color: #FFCD05
  transition-duration: 0.5s
.fill_stock
  font-size: 13px
  height: 0px
  overflow: hidden
  text-align: center
  transition-duration: 0.5s
  padding-top: 0px
  cursor: pointer
.fill_stock_open
  padding-top: 10px
  height: 30px

script.js

let num =12;
function click(num_var){
  num+=num_var;
  $(".num").text(num);
}

$(".minus").click(
  function(){
    click(-1);
    check();
  }
);
$(".add").click(
  function(){
    click(1);
    check();
  }
);
function check(){
  if (num<10){
    $(".text").text("數量極少!!");
    $(".text").css("color","#FF6505");
    $(".text").css("border-bottom","solid 8px #FF6505");
    $(".fill_stock").addClass("fill_stock_open");
  }else if (num<20){
    $(".text").text("賣得不錯喔!!");
    $(".text").css("color","#FFCD05");
    $(".text").css("border-bottom","solid 8px #FFCD05");
    $(".fill_stock").removeClass("fill_stock_open");
  }else if (num<30){
    $(".text").text("還剩很多!!");
    $(".text").css("color","#fff");
    $(".text").css("border-bottom","solid 8px #fff");
  }
}
check();
$(".num").text(num);

let nowtime=0;
$(".fill_stock").click(function(){
  $(".fill_stock").text("☎");
  setInterval(function(){
    nowtime+=1;
    $(".fill_stock").text("☎ 撥打電話中..."+nowtime);
  },1000)
});

---

Please note

這個內容是來自吳哲宇老師的動畫互動網頁程式入門 (HTML/CSS/JS) 課程