continously add or subtract value in Javascript

by Faisal Khan Janjua

HTML

<div id="Temp">0</div>
<button id="add">ADD</button>
<button id="sub">Subtract</button>

<div class="fullwidth">
  <span></span>
</div>
<div class="fullwidth">
  <span></span>
</div>

CSS

.fullwidth{
  width:60%;
  float:right;
  display:block;
  margin-top:20px;
  border:1px solid #999;
}
.fullwidth span, .fullwidth div{
  float:left;
  display:block;
  width:20px;
  height:20px;
  background:#99F;
}

JavaScript

$(document).ready(function () {
    var temp = 0;
    var to = null;
    var int = null;

    $("#add").on("mousedown", function () {
    	if(temp>=0){
        temp++;
          $("#Temp").html(temp);
          $(".fullwidth span").css('margin-left', temp );
          to = setTimeout(function () {
              int = setInterval(function () {
                if(temp>0){
                  temp++;
                  $("#Temp").html(temp);
                  $(".fullwidth span").css('margin-left', temp );
                }
              }, 1); // more less Higher Speed
          }, 20);
      }
    }).on("mouseup", function () {
        clearTimeout(to);
        clearInterval(int);
    });
    $("#sub").on("mousedown", function () {
      if(temp>0){
        temp--;
        $("#Temp").html(temp);
        $(".fullwidth span").css('margin-left', temp );
        to = setTimeout(function () {
          int = setInterval(function () {
            if(temp>0){
              temp--;
              $("#Temp").html(temp);
              $(".fullwidth span").css('margin-left', temp );
            }
          }, 1);// more less Higher Speed
        }, 20);
      }
    }).on("mouseup", function () {
        clearTimeout(to);
        clearInterval(int);
    });
});