js数字动画
发布时间： 2024-11-22 16:12:47
作者： 王乐园 浏览次数：
100
js及简代码实现数字增加的动画
<!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>
<span id="number">0</span>
</body>
<script>
document.addEventListener('DOMContentLoaded', function() {
const numberElement = document.getElementById('number');
const targetNumber = 867958429; // 最后的值
const duration = 5000; // 动画持续时间，单位为毫秒（这里设置为5秒）
let startTime = null;
function animateNumber() {
const currentTime = Date.now();
if (!startTime) startTime = currentTime;
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1);
const currentNumber = Math.floor(progress * targetNumber);
numberElement.textContent = currentNumber.toLocaleString(); // 使用toLocaleString()来格式化数字
if (progress < 1) {
requestAnimationFrame(animateNumber);
} else {
console.log('动画结束时执行的操作');
}
}
animateNumber();
});
</script>
</html>上一篇：(转载)追忆过往青春
下一篇：(转载)时光悠悠 岁月无言