先上效果圖：
GIF 2020-1-6 15-58-38.gif
直接上代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>數(shù)字自動增加</title>
</head>
<body>
<h1 id="time">0.00</h1>
<div>
<button>開始</button>
</div>
<script>
/*方法說明
*@method fmoney 保留兩位小數(shù)
*@for 所屬類名
*@param {Number} s 需要保留的數(shù)據(jù)
*@param {Number} n 保留幾位小數(shù)，0-20之間
*@return {string} 返回數(shù)據(jù)
*/
function fmoney(s, n) {
s = s||0
n = n > 0 && n <= 20 ? n : 2;
s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';
var l = s.split('.') [0].split('').reverse(),
r = s.split('.') [1];
var t = '';
for (var i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '');
}
return t.split('').reverse().join('') + '.' + r;
};
/*方法說明
*@method numberAnimation 數(shù)字自動變化
*@for 所屬類名
*@param {Object} option 配置項
option:{
time:總時間
finalNum:數(shù)字
stepTime:調(diào)速器
digits:默認(rèn)開始數(shù)據(jù)幾位數(shù)
}
*@param {String} target 目標(biāo)dom的ID
*@return {string} 返回數(shù)據(jù)
*/
function numberAnimation(option,target){
option=option||{};
let $this=document.getElementById(target);
let time=option.time||0;//總耗時
let finalNum=option.finalNum||0;//最終的數(shù)據(jù)
let stepTime=option.stepTime||100;//調(diào)速器，改變stepTime，可以改變數(shù)字改變的速率
let digits=option.digits||2;//默認(rèn)開始數(shù)據(jù)幾位數(shù)
let temp=String(Math.pow(10,digits)).replace("1",'');
let l=temp.split("").reverse();
var t = '';
for (var i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '');
}
$this.innerHTML=t.split('').reverse().join('') + '.00' ;
let step=finalNum/(time/stepTime);
let count=0;//計時器
let timer=setInterval(()=>{
count=Number(count)+step;
if(count>=finalNum){
clearInterval(timer);
count=finalNum;
}
$this.innerHTML=fmoney(count);
},30)
}
document.querySelector("button").addEventListener("click",()=>{
numberAnimation({time:1500,finalNum:382671.89,stepTime:50,digits:5},'time');
})
</script>
</body>
</html>
