连续随机化每个div的颜色
setInterval()我必须每秒使用并querySelectorAll()在单击左上角的按钮后随机化网格容器内每个 div 的颜色，并显示 GIF 中看到的当前时间。我知道颜色是随机选择的，实际上使用了 CSS rgba() 函数。这是我的 html 文件中的内容：
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
<script>
var r = Math.round(Math.random()*255);
var g = Math.round(Math.random()*255);
var b = Math.round(Math.random()*255);
function changeColor(){
for (const elem of document.querySelectorAll('div')) {
r = Math.round(Math.random()*255);
g = Math.round(Math.random()*255);
b = Math.round(Math.random()*255);
elem.style.backgroundColor = "rgb("+r+","+g+","+b+", 0.8)";
}
var myTimer = setInterval(changeColor, 1000);
var running = true;
}
</script>
</head>
<body>
<h1>Grid Layout</h1>
<p>This grid layout contains six columns and three rows:</p>
<div class="flex-container">
<button onclick="changeColor()">GO!</button>
<p id="timeinfo">TIME</p>
</div>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
我对此迷路了。任何见解将不胜感激。谢谢！
HUWWW3回答
-
慕尼黑5688855
您需要从 changeColor() 函数中取出 setInterval() 函数。您正在为每个后续的 changeColor() 递归调用创建一个新的间隔，这就是导致速度加快直到我们变得癫痫的原因。加上其他人提到的更具体的选择器（'.grid-container > div'）。这可能以反应式风格更好地完成，而不是每秒循环遍历一组元素，但如果你刚刚接触 html/js/css，这是一个非常好的小测试。我可能会做更多这样的事情：var r = Math.round(Math.random()*255);var g = Math.round(Math.random()*255);var b = Math.round(Math.random()*255);var myTimer;function startSwitching() { myTimer = setInterval(changeColor, 1000);}function stopSwitching() { clearInterval(myTimer);}function changeColor(){ for (const elem of document.querySelectorAll('.grid-container > div')) { r = Math.round(Math.random()*255); g = Math.round(Math.random()*255); b = Math.round(Math.random()*255); elem.style.backgroundColor = "rgb("+r+","+g+","+b+", 0.8)"; }}您需要小心使用间隔并确保自己清理干净，否则可能会使浏览器崩溃。另外，你并没有真正问一个问题，所以不清楚你到底想改变什么。 -
呼啦一阵风
加入document.querySelectorAll('.grid-container > div')for循环，这样只有里面的divgrid-container才会变色。 -
至尊宝的传说
document.querySelectorAll('div')实际上返回一个元素列表。为了更改样式，您需要遍历元素。这是您可以执行此操作的一种方法：for (const elem of document.querySelectorAll('.grid-container > div')) { r = Math.round(Math.random()*255); g = Math.round(Math.random()*255); b = Math.round(Math.random()*255); elem.style.backgroundColor = "rgb("+r+","+g+","+b+")";}
随时随地看视频慕课网APP
相关分类
JavaScript