Input計數器

In this example below you will see how to do a Input計數器 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by hanyin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hanyin ©
  • HTML
  • CSS
  • JavaScript
    .count
  .minus -
  .num 12
  .plus +
  .text 警示訊息
  .phone ☎ 請點此聯絡廠商預約存貨


/*Downloaded from https://www.codeseek.co/hanyin/inputandx8a08andx6578andx5668-oBdLeB */
    *
  //border: solid 1px black
  font-family: 微軟正黑體
  background-color: #333
  color: #ddd
  
html,body
  margin: 0px
  padding: 0px
  width: 100%
  height: 100%

.count
  border: solid 3px
  display: inline-block
  text-align: center
  position: absolute
  top: 50%
  left: 50%
  transform: translateX(-50%)translateY(-50%)

.minus,.plus
  display: inline-block
  font-size: 50px
  padding-left: 10px
  padding-right: 10px
  margin-top: 20px
  vertical-align: top
  cursor: pointer
  user-select: none

  &:hover
    background-color: #ccc
    transition-duration: 0.5s
  
.num
  display: inline-block
  font-size: 80px
  width: 100px
  
.text
  border-bottom: solid 7px
  padding: 5px
  transition-duration: 1s

.phone
  font-size: 13px
  height: 0px
  transition-duration: 0.5s
  overflow: hidden
 
.phone_open
  padding: 5px
  height: 20px
  


/*Downloaded from https://www.codeseek.co/hanyin/inputandx8a08andx6578andx5668-oBdLeB */
    check();

var num=12
$(".minus").click(
  function(){
    num=num-1;
    $(".num").text(num)
    check();
  }
);

$(".plus").click(
  function(){
    num=num+1;
    $(".num").text(num)
    check();
  }
);

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



Comments