js实现随机产生一组数字滚动,几秒后停止
时间: 2024-10-09 16:09:27 浏览: 27
在JavaScript中,你可以利用`setInterval`函数配合数组操作来实现这个效果。首先,你需要创建一个数组存储随机生成的数字,然后定时更新显示的数字,并在设定的时间后通过`clearInterval`停止滚动。以下是一个简单的示例:
```javascript
// 初始化变量
const numbers = []; // 存放随机数的数组
let index = -1; // 当前显示的数字索引
let intervalId;
// 生成并添加随机数到数组
function generateRandomNumbers(num) {
for (let i = 0; i < num; i++) {
numbers.push(Math.floor(Math.random() * 100)); // 生成0-99之间的随机整数
}
}
// 更新显示的数字并切换索引
function scrollNumbers() {
index = (index + 1) % numbers.length; // 滚动到下一个数字
document.getElementById('scrollingNumber').innerText = numbers[index]; // 更新显示的元素内容
}
// 开始滚动,每隔1秒钟执行一次scrollNumbers
generateRandomNumbers(10); // 可以为你要滚动的数字数量
intervalId = setInterval(scrollNumbers, 1000);
// 定义停止滚动的函数,在需要的时候清除定时器
function stopScrolling() {
clearInterval(intervalId);
}
// 添加停止按钮点击事件,调用stopScrolling函数
document.getElementById('stopButton').addEventListener('click', stopScrolling);
```
在这个示例中,你需要在HTML中提供两个元素,一个是用于显示滚动数字的`<span id="scrollingNumber"></span>`,另一个是停止滚动的按钮`<button id="stopButton">Stop</button>`。
阅读全文