如何使用純Javascript創建收銀機效果？

Question

我想用純JavaScript（帶出利用任何庫）創建收款機影響，

這裏是鏈接，這是落實使用Mootools的收銀機的影響，

http://jsbin.com/ehuzes/edit#preview

我想使用原始Javascript來獲得這個效果。這將是巨大的幫助，如果有人提供解決方案。

Answer 1

$('#number').on('change', function (e) { 
    $(this).cashregister($(this).val()); 
}); 

(function ($) { 
    $.fn.cashregister = function (num) { 
     var output = $('#output').html(); 

     function intervalfunc(interval, num) { 
      var end = parseInt($('#number').html()); 
      var cont = parseInt($('#output').html()) 

      $('#output').html(cont + interval); 
      if ($('#output').html() == num) { 
       clearInterval(int); 
       return false; 
      } 
     } 

     if (num > output) { 
      var int = setInterval(function() { intervalfunc(1, num) }, 0.1);  
     }else if (num < output) { 
      var int = setInterval(function() { intervalfunc(-1, num) }, 0.1);   
     }else if (num == $('#output').html()) { 
      // do nothing 
     }else{ 
      alert("Invalid Input!"); 
     } 
    }; 
})(jQuery); 

http://jsfiddle.net/DuLjC/3/ - >工作建議的修復

Answer 2

使用上的按鈕或東西一個onclick功能，它應該（也許從一個文本框的值）獲得的數量和該變量發送到使用.innerHTML上一個div來改變數值定義的功能，然後您使用SetInterval函數使數字每上升或下降1個區間。當達到數字時使用clearInterval。

也許是這樣的：

<div id = "container">0</div> 
<input type = 'text' 
     id = 'number' /> 
<input type = 'button' 
     value = 'change amount' 
     onclick = "var num = document.getElementById('number').value; 
        cashregister(num);" /> 

爲HTML和：

<script type = "text/javascript"> 
    function cashregister(num) { 
    var cont = document.getElementById('container').innerHTML; 
    if (num < cont) { 
     var int = setInterval("intervalfunc(1)", (interval_time_in_miliseconds)); 
     function intervalfunc(num) { 
     var end = document.getElementById('number'); 
     var cont = document.getElementById('cont').innerHTML; 
     cont.innerHTML = cont + num; 
     if (cont == end) { 
      clearInterval(int); 
     } 
     } 
    } else if (num > cont) { 
     var int = setInterval("intervalfunc(-1)", (interval_time_in_miliseconds)); 
     function intervalfunc(num) { 
     var end = document.getElementById('number'); 
     var cont = document.getElementById('cont').innerHTML; 
     cont.innerHTML = cont + num; 
     if (cont == end) { 
      clearInterval(int); 
     } 
     } 
    } else if (num == cont) { 
     //do nothing 
    } else { 
     alert("invalid input!"); 
    } 
    } 

</script> 

我不知道這確切的代碼會工作，但你想要的是沿着這些路線的東西。