本文介绍了如何使用JavaScript实现纯数字逐一停止显示的动画效果。代码通过逐位确定数字的方式,模拟了类似彩票开奖或计时的视觉体验。包含完整的函数实现及调用示例,适用于需要展示动态数字变化的前端场景。
JavaScript实现数字逐一停止滚动的效果
JavaScript实现纯数字逐一停止显示效果的代码示例
核心代码实现
function showScore($ele, num, secand, pause){ //second 按照秒数,动画运行多少秒
if (!secand) { secand = 2;}
if (!pause) { pause = 20;}
var len = String(num).length;
var temnum, times = 0 , stepTimes, max ;
var numArr = String(num).split("");
function getRandom(n){
var num = Math.floor(Math.random()*(Math.pow(10, n)-1 - Math.pow(10, n-1))+Math.pow(10, n-1));
if (String(num).length !== n) {num = getRandom(n);}
return num;
}
function setValue(num, pause, secand){//second 运行多少秒后停止
var len = String(num).length, j=0;
if (!stepTimes) {
max = Math.ceil(secand*1000/len);
stepTimes = Math.ceil(max/pause);
}
temnum = "";
setTimeout(function(){
for (var i = 1; i <= len; i++) {
if (times >= stepTimes*i) {
j++;
temnum += numArr[i-1]+"";
}else{
break;
}
};
if (j < len) {
$ele.html(temnum+""+getRandom(len-j));
}else{
$ele.html(temnum);
}
if (times >= max || j >= len) {return;};
setValue(num, pause, secand);
times++;
}, pause);
}
setValue(num, pause, secand);
}
showScore($(".num"), 2344, 1.5, 10);

效果说明与存档背景
该效果实现了纯数字逐一停止显示,例如数字持续变化,第一位先确定,随后第二位确定,最后第三位确定。由于项目已废弃,此处存档备用。
总结
以上关于JavaScript纯数字逐一停止显示效果的实现代码即为全部内容,供参考使用,感谢支持。