Question

我想使用纯Javascript创建收银机效果（不使用任何库），

以下是Cash Register Effect的链接，该链接使用Mootools实现，

我想使用原始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/ - ＆gt;建议修复的工作版本

Answer 2

在按钮或其他东西上使用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>

我不确定这个确切的代码是否会起作用，但你想要的是这些内容。

Answer 3

我喜欢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>

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

3 个答案: