如何使用纯Javascript创建收银机效果？

Question

I wanted to create a Cash Register Effect using Pure Javascript(With out using any libraries),

Here is the link for Cash register Effect which is implemented Using Mootools,

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

I want to get this effect using raw Javascript. It will be huge help, If somebody gives the solution.

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/ -> working version of suggested fix

Answer 2

I like this one by 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

use an onclick function on a button or something, which should get the number (value from maybe a text box) and to send that variable to a defined function which uses .innerHTML on a div to change the number value, then you use SetInterval function to make the number go either up or down by 1 each interval. then use clearInterval when the number has been reached.

maybe something like:

<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);" />

for the HTML and:

<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>

I'm not sure if this exact code will work but what you want is something along these lines.