可定时改变数字的滚动代码
时间: 2024-02-20 10:57:16 浏览: 17
如果你想要实现可定时改变数字的滚动效果,可以使用以下代码:
HTML代码:
```html
<div id="count-up" class="count-up">
<span class="number">0</span>
</div>
```
CSS代码:
```css
.count-up {
font-size: 48px;
color: #fff;
text-align: center;
margin-top: 100px;
}
```
JavaScript代码:
```javascript
// 定义计数器增长的函数
function countUpNumber(startValue, endValue, duration, number) {
// 设置数字增长的方式和时间
var interval = 50; // 每50毫秒数字增加一次
var steps = duration / interval;
var stepValue = (endValue - startValue) / steps;
// 使用setInterval函数来实现数字的增长效果
var timer = setInterval(function() {
startValue += stepValue;
if (startValue > endValue) {
startValue = endValue;
}
number.innerHTML = Math.round(startValue);
if (startValue >= endValue) {
clearInterval(timer);
}
}, interval);
}
// 获取计数器的 DOM 元素
var countUp = document.getElementById('count-up');
var number = countUp.querySelector('.number');
// 定义定时更改数字的函数
function changeNumber() {
// 随机生成起始值和结束值
var startValue = Math.round(Math.random() * 1000);
var endValue = Math.round(Math.random() * 1000);
// 随机生成持续时间
var duration = Math.round(Math.random() * 5000) + 1000;
// 调用计数器增长的函数
countUpNumber(startValue, endValue, duration, number);
}
// 每隔5秒钟就调用一次定时更改数字的函数
setInterval(changeNumber, 5000);
```
这段代码使用了setInterval函数来实现每隔5秒钟就调用一次定时更改数字的函数,然后根据随机生成的起始值和结束值以及持续时间来调用计数器增长的函数,最终实现可定时改变数字的滚动效果。你可以根据自己的需求来修改定时更改数字的时间间隔和数字的起始值和结束值。