两种方式
一,
<h1 id="num" ></h1>
/** * 数字滚动 * @param {Object} num 开始值 * @param {Object} maxNum 最大值,最终展示的值 */
function numRunFun(num,maxNum,numBox){
var numText = num;
var golb;
function numSlideFun(){
numText+=0.3;
if(numText >= maxNum){
numText = maxNum;
cancelAnimationFrame(golb);
}else {
golb = requestAnimationFrame(numSlideFun);
}
document.getElementById(numBox).innerHTML = ~~(numText)
}
numSlideFun();
}
numRunFun(0,10,‘num‘);
二,
<div id="nub1"></div> <div id="nub2"></div>
let n1 = 0; let n2 = 0; let nub = [317, 1788] let to1 = nub[0]; // 第一个需要显示数字的地方默认最大值 让其从0开始动态达到最大值。 let to2 = nub[1]; // 第二个需要显示数字的地方默认最大值 tonum(); function tonum () { if (n1 < to1 || n2 < to2 ) { n1 += Math.ceil(to1 / 200); n2 += Math.ceil(to2 / 200); n1 = n1 > to1 ? to1 : n1; n2 = n2 > to2 ? to2 : n2; $("#nub1").text(n1); $("#nub2").text(n2); setTimeout(tonum, 50); } else { return false; } }