Question

有一个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>

Answer 1

您应该在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)
   }

更改随机div的颜色

1 个答案: