js实现按钮加减，长按按钮数字一直可变

今天工作过程中遇到一个小问题，即实现按钮加减，单击数据+/-1，长按时会按时间来每秒+/-1。实现后如图所示：

按钮显示代码如下：

   <div class="input-group" style="width:146px;margin-left: 130px;">
         <span class="input-group-btn">
                <button class="btn" id="num-jian"  style="width:25px;border:1px solid #9e9e9e;margin-right:3px;color:#9e9e9e;background-color: #fff;" type="button">—</button> //减号按钮
         </span>
         <input type="text" id="input-num" class="form-control" style="width:35px;border:0px solid #fff;font-size:16px;color:#3366ff;text-align: center;" placeholder="设定" value="1">  //数字显示
         <span class="input-group-btn" >
                <button class="btn " id="num-jia" style="width:25px;border:1px solid #3366ff;color:#3366ff;background-color: #fff;margin-left:3px;" type="button">+</button> //加号按钮
         </span>
   </div>

网上很多资料都只提供了单击事件，而对于长按按钮数字变化都无介绍，部分资料介绍为非js，以下对两种作出说明。

一、仅单击事件按钮加减代码：

    var num_jia = document.getElementById("num-jia");
    var num_jian = document.getElementById("num-jian");
    var input_num = document.getElementById("input-num");
    //加号单击事件
    num_jia.onclick=function(){
        if(input_num.value >= 30) {  //判断最高可加到30
               input_num.value = 30;
         }else {
               input_num.value = parseInt(input_num.value) + 1;
         }
     }
     //减号单击事件
    num_jian.onclick=function(){
        if(input_num.value <= 1) { //判断最低可减到1
                 input_num.value = 1;
          }else {
                 input_num.value = parseInt(input_num.value) - 1; //执行-1
          }
    }

二、单击+长按事件

长按时涉及mousedown、mouseup事件，mouseup时不允许执行单击事件。
此问题我给予了一个变量i，当按下按钮时间每多过1秒，数字增加的同时，i++，证明是长按事件，借以i==0判断是否需要执行单击事件。

   var num_jia = document.getElementById("num-jia"); //加号
   var num_jian = document.getElementById("num-jian"); //减号
   var input_num = document.getElementById("input-num");  //数字显示
   //加号按钮事件--鼠标按下
   num_jia.onmousedown = function () {
         var i=0; //变量i
         mouseTime = setInterval(function (){  //setInterval可一直执行内部函数
                add();
                 i++  //若过一秒，执行一次i++
         }, 1000);
         if(i ==0){  //i=0时证明无长按事件为单击事件
                 add();
          }
    } 
    function add(){ //数字加1函数
            if(input_num.value >= 30) {
                   input_num.value = 30;
            }else {
                   input_num.value = parseInt(input_num.value) + 1;
             }
     }
     num_jia.onmouseup = function () {//鼠标抬起，执行清除
             clearInterval(mouseTime);   //清除setInterval的时间
     }
     //减号按钮事件（内容基本同上，不予注释）    
     num_jian.onmousedown = function () {
            var i=0;
            mouseTime = setInterval(function (){   
                  minus();
                  i++     //i=0时证明无长按事件为单击事件
            }, 1000); //1000即1秒
            if(i ==0){
                   minus();
            }
      }   
      function minus(){
            if(input_num.value <= 1) {
                   input_num.value = 1;
             }else {
                   input_num.value = parseInt(input_num.value) - 1;
             }
       }
       num_jian.onmouseup = function () {
              clearInterval(mouseTime);
       }

其中涉及一个小知识：
js 定时器有以下两个方法：
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。使用 clearTimeout() 或窗口关闭清除。
setInterval(code,millisec)：code可以直接用引号"执行的代码/方法（）"或如上代码所示；millisec：周期性执行或调用 code 之间的时间间隔，以毫秒计。