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

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

这是使用Mootools实现的收银机效果链接

---

我希望使用原始Javascript获得这种效果。如果有人给出解决方案，这将是巨大的帮助。

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

0

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

功能收银机（num）{
var cont=document.getElementById（'container'）.innerHTML；
如果（数量续）{
var int=setInterval（“intervalfunc（-1）”，（时间间隔单位为毫秒）；
函数intervalfunc（num）{
var end=document.getElementById（'number'）；
var cont=document.getElementById（'cont'）.innerHTML；
cont.innerHTML=cont+num；
如果（cont==end）{
清除间隔（int）；
}
}
}else if（num==cont）{
//无所事事
}否则{
警报（“无效输入！”）；
}
}

---

我不确定这个确切的代码是否能工作，但您需要的是这些方面的东西。

在按钮或其他东西上使用onclick函数，它应该获取数字（可能来自文本框的值），并将该变量发送到定义的函数，该函数在div上使用.innerHTML来更改数字值，然后使用

SetInterval

函数使数字每间隔上下移动1。然后在达到数字后使用

clearInterval

$('#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);

可能是这样的：

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

0

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

功能收银机（num）{
var cont=document.getElementById（'container'）.innerHTML；
如果（数量续）{
var int=setInterval（“intervalfunc（-1）”，（时间间隔单位为毫秒）；
函数intervalfunc（num）{
var end=document.getElementById（'number'）；
var cont=document.getElementById（'cont'）.innerHTML；
cont.innerHTML=cont+num；
如果（cont==end）{
清除间隔（int）；
}
}
}else if（num==cont）{
//无所事事
}否则{
警报（“无效输入！”）；
}
}

我不确定这个确切的代码是否会起作用，但您需要的是这些方面的东西。

$（'#number'）。on（'change'，function（e）{
$('#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);

$（this.cash register（$（this.val（））；
});
（函数（$）{
$.fn.cashlister=函数（num）{
var output=$（'#output'）.html（）；
函数intervalfunc（间隔，num）{
var end=parseInt（$（'#number'）.html（）；
var cont=parseInt（$（'#output'）.html（））
$（'#output'）.html（cont+interval）；
if（$（'#output'）.html（）==num）{
清除间隔（int）；
返回false；
}
}
如果（数值>输出）{
var int=setInterval（函数（）{intervalfunc（1，num）}，0.1）；
}else if（num<输出）{
var int=setInterval（函数（）{intervalfunc（-1，num）}，0.1）；
}else if（num=$（'#output'）.html（））{
//无所事事
}否则{
警报（“无效输入！”）；
}
};
})（jQuery）；

->建议修复程序的工作版本

$（'#number'）。关于（'change'，函数（e）{
$（this.cash register（$（this.val（））；
});
（函数（$）{
$.fn.cashlister=函数（num）{
var output=$（'#output'）.html（）；
函数intervalfunc（间隔，num）{
var end=parseInt（$（'#number'）.html（）；
var cont=parseInt（$（'#output'）.html（））
$（'#output'）.html（cont+interval）；
if（$（'#output'）.html（）==num）{
清除间隔（int）；
返回false；
}
}
如果（数值>输出）{
var int=setInterval（函数（）{intervalfunc（1，num）}，0.1）；
}else if（num<输出）{
var int=setInterval（函数（）{intervalfunc（-1，num）}，0.1）；
}else if（num=$（'#output'）.html（））{
//无所事事
}否则{
警报（“无效输入！”）；
}
};
})（jQuery）；

---

->建议修复的工作版本

我喜欢Nevan Scott的这一版本：

var总计=0；
document.getElementById（'entry'）。onsubmit=enter；
函数enter（）{
var entry=document.getElementById（'newEntry'）。值；
var entry=parseFloat（条目）；
货币=货币格式（条目）；
document.getElementById（'entries'）.innerHTML+=''+currency+''；
总数+=条目；
document.getElementById（'total'）.innerHTML=currencyFormat（total）；
document.getElementById（'newEntry'）。值=“”；
返回false；
}
函数currencyFormat（数字）{
var货币=浮动（数字）；
货币=货币。toFixed（2）；
货币=“$”+货币；
返回货币；
}

正文{
背景：#EEE；
芳