[英]Creating Spinning Numbers until total is reached
昨天我得到了一些帮助: http : //jsfiddle.net/hopkins_matt/513ng07d/ (感谢Matt Hopkins)-----
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);
我也想创造一个旋转总数,直到达到最终数字......
IE我们已经发货到190个国家,是否有可能在屏幕上显示文字时从0-190旋转这个数字?
所以它会旋转数字直到它达到190,然后停止。
任何帮助,将不胜感激 :)
如果你想要一个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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.