数字滚动原生js的三种方式
让数字滚动的效果简单用计时器setInterval就能轻易的实现,例如
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 id="numBox" ></h1>
</body>
<script type="text/javascript">
function numRunFun(num, maxNum){
var numBox = document.getElementById("numBox");
var num = num;
var maxNum = maxNum;
var timer = setInterval(function(){
num++; // 调节速度
if(num >= maxNum){
numBox.innerHTML = maxNum;
clearInterval(timer);
} else {
numBox.innerHTML = ~~(num);
}
},100); // 也可以调节速度
}
// 运行
numRunFun(0, 10);
</script>
</html>对于setInterval的缺点要从浏览器的的进程说起了, 可以查看: 从浏览器多进程到JS单线程，JS运行机制
对于setInterval和setTimeout对浏览器的影响, 还可以查看: js中setTimeout和setInterval性能详解
对于setInterval的缺点,所以要用setTimeout来模拟setInterval
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 id="numId"></h1>
</body>
<script type="text/javascript">
/**
* 数字滚动
* @param {Object} num
* @param {Object} maxNum
*/
function numRunFun(num, maxNum) {
var num = num;
var maxNum = maxNum;
var numId = document.getElementById("numId");
// 利用setTimeout模拟Interval
function numSlideFun(){
num++; // 调节速度 可以小数
if(num >= maxNum){
numId.innerHTML = maxNum;
return;
}else{
numId.innerHTML = ~~(num);
setTimeout(function(){ // 利用setTimeout模拟setInterval
return numSlideFun();
},100);// 也可以调节速度
}
}
numSlideFun();
}
// 运行
numRunFun(0, 10);
</script>
</html>
对于H5有了新的解决方案 window.requestAnimationFrame() 方法,为js动画的首选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 id="num" ></h1>
</body>
<script type="text/javascript">
var numBox = document.getElementById('num');
/**
* 数字滚动
* @param {Object} num 开始值
* @param {Object} maxNum 最大值,最终展示的值
*/
function numRunFun(num,maxNum){
var numText = num;
var golb; // 为了清除requestAnimationFrame
function numSlideFun(){
numText+=1; // 速度的计算可以为小数
if(numText >= maxNum){
numText = maxNum;
cancelAnimationFrame(golb);
}else {
golb = requestAnimationFrame(numSlideFun);
}
numBox.innerHTML = ~~(numText)
}
numSlideFun();
}
// 运行
numRunFun(0,10)
</script>
</html>对于window.requestAnimationFrame的讲解可以查看 window.requestAnimationFrame讲解
扫描二维码关注公众号，回复：
9064652 查看本文章
