<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="numBox"></h1>
<script>
var numId = document.getElementById("numBox");
function NumAutoPlusAnimation(startNum, endNum ) {
var step = (endNum - startNum) / 20;//颗粒化可以控制速度
var count = startNum;
var timer = setInterval(() => {
count = count + step;
if (count >= endNum) {
clearInterval(timer);
count = endNum;
}
numId.innerHTML = count.toFixed(2)
}, 30);
}
NumAutoPlusAnimation(0, 123326.88);
</script>
</body>
</html>
原生js实现数字滚动效果demo
最新推荐文章于 2024-07-04 20:14:20 发布