setInterval()我必須每秒使用并querySelectorAll()在單擊左上角的按鈕后隨機化網(wǎng)格容器內(nèi)每個 div 的顏色，并顯示 GIF 中看到的當(dāng)前時間。我知道顏色是隨機選擇的，實際上使用了 CSS rgba() 函數(shù)。這是我的 html 文件中的內(nèi)容：<!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>我對此迷路了。任何見解將不勝感激。謝謝！
連續(xù)隨機化每個div的顏色
HUWWW
2023-06-09 17:49:29
