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>