JSFiddle - React, Tailwind, and code Playground

by jim28791

HTML

<div><span class="head">車輛需求計算機</span><span class="ver">ver 1.0</span></div>
<div id="cnt">
    一台車可坐幾人:<input type="text" name="col" value="5" style="width:30px;"><br />
    總共需要的人：<input type="text" name="people" value="7" style="width:60px;">
    <button onclick="cal.run();" name="cal_btn" class="buzz">計算</button>
    <div class="result"></div>
</div>

CSS

input[type="text"]{padding:3px;font-size:12pt;border-radius:6px;}

.head{font-size:16pt;font-weight:bold;}
.ver{color:#ccc;}

.buzz {
  padding:4px;
  cursor:pointer;
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.buzz:hover {
  -webkit-animation-name: buzz;
  animation-name: buzz;
  -webkit-animation-duration: .15s;
  animation-duration: .15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

@keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

JavaScript

var cal={
    'run':function(){
        var obj=$('#cnt'),
            robj=obj.find('.result');
        var col=obj.find('input[name="col"]').val(),
            amt=obj.find('input[name="people"]').val();
        col = parseInt(col);amt = parseInt(amt);
        if(amt<0 || col <0){
            alert('WTF....less 0 ????');
            return false;
        }
        if(col > 10){
            alert('超過10人坐去搭公車或捷運高鐵火車飛機啦');
            return false;
        }
        res=parseInt(amt/col)+(amt%col>0?1:0);
            robj.html('總共需要：'+res+' 台'+cal.cht(col)+'人座');
    },
    'cht':function(x){
        var arr={
            0:'零',
            1:'一',
            2:'二',
            3:'三',
            4:'四',
            5:'五',
            6:'六',
            7:'七',
            8:'八',
            9:'九',
            10:'十'
        }
        return arr[x];
    }
}