input计算数量及金额

1.html　　

<p id="input_main">
   <em><i id="priceNum">10</i>元</em>
   <span id="c_sub">-</span>
   <input type="" name="" maxlength="4" id="numInput" value="1" />
   <span id="c_add">+</span>
   <span id="num_mun">0</span>
</p>

 

2.css

　　

*{
   padding: 0;
   margin: 0 auto;
}
p{
   width: 300px;
   height: 200px;
   margin: 200px auto;
   border: solid 1px #ccc;
   text-align: center;
   padding-top: 100px;
}
span{
   width:30px;
   line-height: 30px;
   height: 30px;
   border: solid 1px #ccc;
   display: inline-block;
   text-align: center;
   font-size: 20px;
   cursor: pointer;
}
input{
   height: 30px;
   line-height: 30px;
   width: 50px;
   padding: 0;
   margin: 0;
}

 

3.js

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
   $(function(){
      var toolFn = {
         fmoney : function(s, n) {
            n = n > 0 && n < 20 ? n : 2;
            s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';
            var l = s.split('.')[0].split('').reverse(),
                  r = s.split('.')[1],
                  t = '';
            for (var i = 0; i < l.length; i++) {
               t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '');
            }
            return t.split('').reverse().join('') + '.' + r;
         }
      };
      var eId;
      var curInput;
      var isint=/^[0-9]*[1-9][0-9]*$/;
      var regExpInt= new RegExp(isint);
      var priceNum = $('#priceNum').text();
      $('#input_main').on('click','span',function(e){
         eId= e.target.id;
         curInput =document.getElementById('numInput');
         if(eId == 'c_sub' && curInput.value > 1){
            --curInput.value;
         }else if(eId == 'c_add' && curInput.value < 9999){
            ++curInput.value;
         }
         $('#num_mun').text(toolFn.fmoney(priceNum * curInput.value, 2));
      }).on('keyup','#numInput',function(){
         curInput = document.getElementById('numInput');
         if (curInput.value.match(regExpInt) == null) {
            curInput.value = 1;
         }
         $('#num_mun').text(toolFn.fmoney(priceNum * curInput.value, 2));
      })
   })
</script>

 

 

转载于:https://www.cnblogs.com/fss226/p/5431789.html