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的缺点要从浏览器的的进程说起了
- 对于setInterval和setTimeout对浏览器的影响
优化一
对于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>
