我无法使用setInterval函数

Question

我正在尝试制作Simon说的游戏，并且我需要每秒随机更改背景。 它会发生变化，但是会立即执行所有操作。 我打算稍后再添加样式表，但是现在，我只需要使用它即可。 请帮忙。 我是初学者，请保持温柔。

HTML：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Simon Says</title>
        <script src="script.js"></script>
    </head>

    <body>
        <button onclick="blue()" class="blue">Blue</button> 
        <button onclick="green()" class="green">Green</button>
        <button onclick="red()" class="red">Red</button>        
        <button onclick="yellow()" class="yellow">Yellow</button>
        <button onclick="ready()" class="ready">Ready</button>
    </body>
</html>

使用Javascript：

var seq = [0,1,2,1,3,2];
var rnd; 

function ready(){
    rnd = seq.length + 1;
    for(i = 0; i <= rnd;){
        seq[rnd] = Math.floor(Math.random()*4);
        setInterval(
        function () {
            switch(seq[i]){
                case 0:
                    document.body.style.backgroundColor = "rgb(0,0,255)";
                break;

                case 1:
                    document.body.style.backgroundColor = "rgb(0,255,0)";
                break;

                case 2:
                    document.body.style.backgroundColor = "rgb(255,0,0)";
                break;

                case 3:
                    document.body.style.backgroundColor = "rgb(255,255,0)";
                break;
            }
        }, 1000);
        console.log(i);
        i++;
    }
    rnd++;
}

Answer 1

setInterval并不是您真正想要的。 尝试另一种方法-

 const buttons = { red: document.querySelector('.red') , green: document.querySelector('.green') , blue: document.querySelector('.blue') , yellow: document.querySelector('.yellow') } const sleep = ms => new Promise (r => setTimeout (r, ms)) const playSequence = async (seq, speed = 500) => { for (const s of seq) { buttons[s].classList.toggle('lit', true) await sleep (speed) buttons[s].classList.toggle('lit', false) await sleep (speed) } } playSequence ([ 'red', 'red', 'blue', 'green', 'yellow', 'red' ]) .then(_ => console.log('done'))

 .red { --rgb: 255, 0, 0; } .green { --rgb: 0, 255, 0; } .blue { --rgb: 0, 0, 255; } .yellow { --rgb: 255, 255, 0; } button { display: inline-block; width: 10vw; height: 10vw; background-color: rgba(var(--rgb), 0.25); } button.lit { background-color: rgba(var(--rgb), 1); }

 <button class="red"></button> <button class="green"></button> <button class="blue"></button> <button class="yellow"></button>

调整speed以增加难度-

// 200 ms delay
playSequence ([ 'red', 'red', 'blue', 'green', 'yellow', 'red' ], 200)
  .then(_ => console.log('done'))

展开下面的代码片段，以查看其播放速度更快-

 const buttons = { red: document.querySelector('.red') , green: document.querySelector('.green') , blue: document.querySelector('.blue') , yellow: document.querySelector('.yellow') } const sleep = ms => new Promise (r => setTimeout (r, ms)) const playSequence = async (seq, speed = 500) => { for (const s of seq) { buttons[s].classList.toggle('lit', true) await sleep (speed) buttons[s].classList.toggle('lit', false) await sleep (speed) } } // 200 ms delay playSequence ([ 'red', 'red', 'blue', 'green', 'yellow', 'red' ], 200) .then(_ => console.log('done'))

 .red { --rgb: 255, 0, 0; } .green { --rgb: 0, 255, 0; } .blue { --rgb: 0, 0, 255; } .yellow { --rgb: 255, 255, 0; } button { display: inline-block; width: 10vw; height: 10vw; background-color: rgba(var(--rgb), 0.25); } button.lit { background-color: rgba(var(--rgb), 1); }

 <button class="red"></button> <button class="green"></button> <button class="blue"></button> <button class="yellow"></button>

Answer 2

您可以使代码更干燥，只需将颜色添加到数组中，然后将主体背景设置为随机索引所给定的该数组的索引，即可解决循环/计时器问题。 我使用setTimeout代替setInterval ，它会调用一个函数，直到完成步骤数为止。

 // Cache the DOM elements const out = document.querySelector('#out'); const { body } = document; const seq = [0, 1, 2, 1, 3, 2]; // Set up your color array const cols = ["rgb(0,0,255)", "rgb(0,255,0)", "rgb(255,0,0)", "rgb(255,255,0)"]; function ready() { // `next` accepts a parameter c which is the current // step count. It's default is 0 const next = function(c = 0) { // If the step count is less than 6 if (c < 6) { // Update the DOM... out.textContent = `Step: ${c + 1}`; body.style.backgroundColor = cols[seq[c]]; // ...and call the function again after a second // incrementing the step count setTimeout(next, 1000, ++c); } } // Call the loop the first time next(); }

 #out { background-color: white };

 <button onclick="ready()" class="ready">Ready</button> <div id="out"></div>

我无法使用setInterval函数

问题描述

2 个解决方案

解决方案1
0 2019-01-21 20:47:28

解决方案2
0 2019-01-21 20:47:45

我无法使用setInterval函数

问题描述

2 个解决方案

解决方案1 0 2019-01-21 20:47:28

解决方案2 0 2019-01-21 20:47:45

解决方案1
0 2019-01-21 20:47:28

解决方案2
0 2019-01-21 20:47:45