javascript - 创建旋转数字直到达到总数

Question

昨天我得到了一些帮助来实现这一目标: http://jsfiddle.net/hopkins_matt/513ng07d/ (感谢马特霍普金斯)-----

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function timeSince() {
    var prevTime = new Date(2015,8,8,0,0);
    var thisTime = new Date();
    return (thisTime.getTime() - prevTime.getTime()) / 1000;
}

function parcelCount() {
    var secDiff = timeSince();

    var leftNum = document.getElementById("left");
    var midNum = document.getElementById("mid");
    var leftNumCount = Math.round(((76/60) * secDiff) + 40093794);
    var midNumCount = Math.round(((43/60) * secDiff) + 22874098);

    leftNum.innerHTML = numberWithCommas(leftNumCount);
    midNum.innerHTML = numberWithCommas(midNumCount);
}
parcelCount();
setInterval(parcelCount, 1000);

我还想创建一个旋转总数，直到达到最终数字...

即 我们已经运送到 190 个国家/地区，当文本出现在屏幕上时，是否可以将此数字从 0-190 旋转？

所以它会旋转数字直到达到 190，然后停止。

任何帮助将不胜感激:)

Answer 1

如果您只想要一个从 0 到 190 的动画，您可以使用它。

只需循环一个增加显示变量的函数。

var totalShipped = 190;
var shippedDisplay = 0;
var shippedStep = totalShipped / (2 * 1000 / 100); // Animation duration 2 sec
function animateShipped() {
  if (shippedDisplay > totalShipped)
    shippedDisplay = totalShipped;
  document.getElementById("shipped").innerHTML = Math.round(shippedDisplay);
  if (shippedDisplay < totalShipped) {
    shippedDisplay += shippedStep;
    setTimeout(animateShipped, 100);
  }
}
animateShipped();

<h3>Shipped</h3>
<span id="shipped"></span>