如何使用純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

我喜歡Nevan Scott撰寫的這篇文章： https ：//codepen.io/nevan/pen/uBkEr

 var total = 0; document.getElementById('entry').onsubmit = enter; function enter() { var entry = document.getElementById('newEntry').value; var entry = parseFloat(entry); currency = currencyFormat(entry); document.getElementById('entries').innerHTML += '<tr><td></td><td>' + currency + '</td></tr>'; total += entry; document.getElementById('total').innerHTML = currencyFormat(total); document.getElementById('newEntry').value = ''; return false; } function currencyFormat(number) { var currency = parseFloat(number); currency = currency.toFixed(2); currency = '$' + currency; return currency; } 

 body { background: #EEE; font-family: sans-serif; font-size: 20px; margin: 3em; padding: 0; } #register { width: 20em; margin: auto; } #ticket { background: white; margin: 0 1em; padding: 1em; box-shadow: 0 0 5px rgba(0,0,0,.25); } #ticket h1 { text-align: center; } #ticket table { font-family: monospace; width: 100%; border-collapse: collapse; } #ticket td, #ticket th { padding: 5px; } #ticket th { text-align: left; } #ticket td, #ticket #total { text-align: right; } #ticket tfoot th { border-top: 1px solid black; } #entry { background: #333; padding: 12px; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,.25); } #entry input { width: 100%; padding: 10px; border: 1px solid black; text-align: right; font-family: sans-serif; font-size: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,.5); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #entry input:focus { outline: none; border-color: rgba(255,255,255,.75); } 

 <div id="register"> <div id="ticket"> <h1>Thank You!</h1> <table> <tbody id="entries"> </tbody> <tfoot> <tr> <th>Total</th> <th id="total">$0.00</th> </tr> </tfoot> </table> </div> <form id="entry"> <input id="newEntry" autofocus placeholder="How Much?"> </form> </div> 

Answer 3

在按鈕等上使用onclick函數，該函數應獲取數字（可能是文本框中的值），並將該變量發送到已定義的函數，該函數在div上使用.innerHTML來更改數字值，然后使用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>

我不確定這個確切的代碼是否會起作用，但是您想要的是這些方面的東西。