帮我写一个渲染时数字跳动到指定的数字
时间: 2024-02-09 15:10:35 浏览: 25
可以使用 JS 的定时器和递归来实现数字跳动的效果。以下是一个简单的实现:
HTML:
```
<span id="counter"></span>
```
JS:
```
function animateCounter(element, start, end, duration) {
let range = end - start
let current = start
let increment = end > start ? 1 : -1
let stepTime = Math.abs(Math.floor(duration / range))
let timer = setInterval(function() {
current += increment
element.innerHTML = current
if (current == end) {
clearInterval(timer)
}
}, stepTime)
}
let counter = document.getElementById('counter')
animateCounter(counter, 0, 100, 1000) // 将数字从 0 跳动到 100,用 1000 毫秒完成跳动动画
```
这个函数接受四个参数:要跳动的元素、起始数字、结束数字和动画持续时间(以毫秒为单位)。函数会根据起始数字和结束数字计算出数字跳动的范围和方向,并根据持续时间和跳动范围计算出每一步的时间间隔。然后使用 setInterval 来定时更新数字,直到数字跳动到结束数字为止。