<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<font size="5" id="time">0</font>
<script>
function NumAutoPlusAnimation(targetEleId, options) {
var numElement = document.getElementById(targetEleId),
time = options.time, //总时间--毫秒为单位
finalNum = options.finalNum, //最终显示数值
regulator = options.regulator, //调速器,改变regulator的数值可以调节数字改变的速度
step = finalNum / (time / regulator),/*每30ms增加的数值--*/
count = 0, //计数器
initial = 0;
var timer = setInterval(function() {
count = count + step;
if(count >= finalNum) {
clearInterval(timer);
count = finalNum;
}
//t未发生改变的话就直接返回
//避免调用text函数,提高DOM性能
var t = Math.floor(count);
if(t == initial) return;
initial = t;
numElement.innerHTML = initial;
}, 30);
}
NumAutoPlusAnimation("time", {
time: 1500,
finalNum: 100,
regulator: 50
})
</script>
</body>
</html>
数字累加动画
于 2022-11-03 20:51:18 首次发布