js数字动画
发布时间： 2024-11-22 16:12:47
作者： 王乐园 浏览次数：
246
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>
<div id="number">0</div>
<div id="number1">0</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', function () {
const numberElement = document.getElementById('number');
const numberElement1 = document.getElementById('number1');
const targetNumber = 88; // 最后的值
const duration = 60000; // 动画持续时间，单位为毫秒（这里设置为5秒）
let startTime = null;
// 方法一：使用requestAnimationFrame函数
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();
// 方法二：使用setInterval函数
function numberAnimation (targetNumber, duration) {
let currentNumber = 0;
const increment = targetNumber / (duration / 10); //每10毫秒增加的数字量
const startTime = setInterval(() => {
currentNumber += increment;
if (currentNumber >= targetNumber) {
clearInterval(startTime);
currentNumber = targetNumber;
}
numberElement1.textContent = currentNumber.toFixed(0).toString().toLocaleString(); // 使用toLocaleString()来格式化数字
}, 10);
}
numberAnimation(targetNumber, duration); //传入目标数字和动画持续时间（毫秒）
});
</script>
</html>
上一篇：(转载)追忆过往青春
下一篇：(转载)时光悠悠 岁月无言