有一个25 div的运动场。通过单击“播放”按钮,随机div应该变成蓝色。 通过单击蓝色的div,应将其重新粉刷成绿色。 如果没有点击,则在用蓝色晒黑后2秒钟后,应将其重新涂成红色。
单击时,绿色点亮,一段时间后变为红色。 要满足上述条件需要进行哪些更改以及如何进行更改?
const duel = ['duel1', 'duel2', 'duel3', 'duel4', 'duel5', 'duel6',
'duel7', 'duel8', 'duel9', 'duel10', 'duel11', 'duel12', 'duel13',
'duel14', 'duel15', 'duel16', 'duel17', 'duel18', 'duel19', 'duel20',
'duel21', 'duel22', 'duel23', 'duel24', 'duel25'];
let setBlue = (rancelBlue) => {
const randomNumber = duel[Math.floor(Math.random() * 25)];
rancelBlue = document.getElementById(randomNumber).style.backgroundColor = 'blue'
setTimeout(setBlue, 2000)
setTimeout(()=> document.getElementById(randomNumber).style.backgroundColor='red',2000)
};
let setGreen = (e) => {
if (e.target.style.backgroundColor === 'blue')
e.target.style.backgroundColor = 'green'
};
<div>
<div>
<button onClick={setBlue}>Play</button>
</div>
<div onClick={setGreen} >
<25 div></div>
</div>
</div>
答案 0 :(得分:0)
您应该在setTimeout回调中添加蓝色背景检查。如果背景色为蓝色,则仅将其设置为红色。 而且我认为在两次调用setTimeout中没有必要,因为两者都可以在两秒钟内完成。
let setBlue = (rancelBlue) => {
const randomNumber = duel[Math.floor(Math.random() * 25)];
rancelBlue = document.getElementById(randomNumber).style.backgroundColor = 'blue'
setTimeout(()=> {
if (e.target.style.backgroundColor === 'blue') {
document.getElementById(randomNumber).style.backgroundColor='red'
}
setBlue()
},2000)
}