动态修改每行颜色要求:按顺序每隔一秒钟变换一行,颜色随机,无限次执行 JS动态修改每行颜色要求:按顺序每隔一秒钟变换一行,颜色随机,无限次执行
时间: 2024-10-16 07:06:58 浏览: 19
在JavaScript中,你可以使用`setInterval`函数结合数组和随机数生成来实现这个功能。首先,你需要创建一个包含多种颜色的数组,并通过一个变量跟踪当前行的索引。每次设置定时器,都会改变指定行的颜色。这是一个基本的示例:
```javascript
let colors = ['#FF0000', '#00FF00', '#0000FF', 'blue', 'red', 'green']; // 颜色数组
let currentRow = 0; // 当前行的索引
let intervalId;
function changeColor() {
let randomColor = colors[Math.floor(Math.random() * colors.length)]; // 随机选择一个颜色
document.getElementById('row' + currentRow).style.color = randomColor; // 修改当前行颜色
// 每隔一秒切换到下一行,如果到达数组末尾则回到第一行
if (currentRow === colors.length - 1) {
currentRow = 0;
} else {
currentRow++;
}
}
intervalId = setInterval(changeColor, 1000); // 每秒执行一次changeColor函数
// 要停止这个循环,可以随时清除定时器
// 清除方法:clearInterval(intervalId);
```
在这个例子中,假设你有HTML结构类似这样的元素:
```html
<div id="container">
<div id="row0" style="color: black;">行1</div>
<!-- ... -->
<div id="rowN">行N</div>
</div>
```
阅读全文