當我單擊“更改主題”按鈕時，如何使用提供的 3 個數組更改 3 個 div 的顏色。<script>var colors = ['red', 'green', 'blue']var colors1 = ['teal', 'brown', 'tan']var colors2 = ['orange', 'purple', 'black'];var boxed = document.querySelectorAll(".box");var button = document.querySelector("button");button.addEventListener("click", function () { for (i = 0; i < boxed.length; i++) { boxed[i].style.backgroundColor = colors[Math.floor(Math.random() * 3)]; boxed[i].style.width = '100px'; boxed[i].style.height = '100px'; boxed[i].style.display = 'inline-block'; }});button.style.cursor = "pointer";</script>
2 回答
慕后森
TA貢獻1802條經驗 獲得超5個贊
我想你想要這樣的東西-
更新了需求的代碼
var colors = [
['red', 'green', 'blue'],
['teal', 'brown', 'tan'],
['orange', 'purple', 'black']
]
var boxed = document.querySelectorAll(".box");
var button = document.querySelector("button");
button.addEventListener("click", function () {
let colorIndex = Math.floor(Math.random() * 3);
for (i = 0; i < boxed.length; i++) {
boxed[i].style.backgroundColor = colors[colorIndex][i];
boxed[i].style.width = '100px';
boxed[i].style.height = '100px';
boxed[i].style.display = 'inline-block';
}
});
button.style.cursor = "pointer";
.box {
width: 100px;
height: 100px;
display: inline-block;
background: gray;
}
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<button>Theme</button>
動漫人物
TA貢獻1815條經驗 獲得超10個贊
類似的東西？
const colors= [ ['red', 'green', 'blue']
, ['teal', 'brown', 'tan']
, ['orange', 'purple', 'black'] ]
, boxed = document.querySelectorAll(".box")
, button = document.querySelector("button")
;
button.onclick=_=>
{
let colorN = Math.floor(Math.random() *3)
boxed.forEach((box,i)=>
{
box.style.backgroundColor = colors[colorN][i];
})
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgrey;
}
<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box">box 3</div>
<button>change Colors</button>
- 2 回答
- 0 關注
- 130 瀏覽
添加回答
舉報
0/150
提交
取消