Question

基本上，我已经创建了一个带有反应时间游戏的网页。圆形图案中有8个正方形，其中心是一个蓝色圆圈，在鼠标悬停时隐藏在页面右侧的指令，并且从3开始倒计时。我希望我的JavaScript能够生成一个1到8之间的随机数，它对应于一个正方形，该正方形将变为绿色供用户单击。我在任何地方都找不到类似的东西，而且不确定JavaScript是否正确（我的HTML和CSS是否按预期工作），因为什么都不发生，因为我不知道在哪里或如何运行所创建的函数（保证它是正确的））。

         <script>
                var randomNum = Math.floor(Math.random() * 8) +1;
                // generates a random number between 1-8
                function randomWholeNum () {
                    return Math.random();
                }

                    if (randomNum === 1) {
                        document.getElementById("square1").style.background = rgb(0,200,0);
                        //if generated number is 1, square 1 will change to green
                        }
                    else if (randomNum === 2) {
                        document.getElementById("square2").style.background = rgb(0,200,0);
                        //if generated number is 2, square 2 will change to green
                        }
                    else if (randomNum === 3) {
                        document.getElementById("square3").style.background = rgb(0,200,0);
                        //if generated number is 3, square 3 will change to green
                        }
                    else if (randomNum === 4) {
                        document.getElementById("square4").style.background = rgb(0,200,0);
                        //if generated number is 4, square 4 will change to green
                        }      
                    else if (randomNum === 5) {
                        document.getElementById("square5").style.background = rgb(0,200,0);
                        //if generated number is 5, square 5 will change to green
                        } 
                    else if (randomNum === 6) {
                        document.getElementById("square6").style.background = rgb(0,200,0);
                        //if generated number is 6, square 6 will change to green
                        }
                    else if (randomNum === 7) {
                        document.getElementById("square7").style.background = rgb(0,200,0);
                        //if generated number is 7, square 7 will change to green
                        }
                    else (randomNum === 8); {
                        document.getElementById("square8").style.background = rgb(0,200,0);
                        //if generated number is 8, square 8 will change to green
                        }

            </script>

我还需要为这些计时添加计时，以便在倒计时之后发生，但是现在我只希望随机方块变成绿色。这是我的HTML：

<body>
    <div class="squares"></div>
    <div id="square1"></div>
    <div id="square2"></div>
    <div id="square3"></div>
    <div id="square4"></div>
    <div id="square5"></div>
    <div id="square6"></div>
    <div id="square7"></div>
    <div id="square8"></div>
    <div class="title">
        <img src="title.png" alt="My title">
    </div>
    <div class="movingstuff">
        <div id="circle"></div>
        <div id="instructions">
                <img src="instructions.png">
        </div>
        <div id="howtoplay">
                <img src="howtoplay.png" alt="Instructions">
        </div>        
        <div id="three">
            <img src="three.png" alt="Three">
        </div>
        <div id="two">
            <img src="two.png" alt="Two">
        </div>
        <div id="one">
            <img src="one.png" alt="One">
        </div>

    </body>

还有我的CSS：

body {
background-image: url("mountain2.jpg");
}


#square1 {
width: 100px;
height: 100px;
position: absolute;
left: 215px;
top: 215px;
background: rgb(180,0,0);
border: 2px solid black;
border-radius: 5px;
}

#square2 {
width: 100px;
height: 100px;
position: absolute;
left: 400px;
top: 150px;
background: rgb(180,0,0);
border: 2px solid black;
border-radius: 5px;
}

#square3 {
width: 100px;
height: 100px;
position: absolute;
left: 585px;
top: 215px;
background: rgb(180,0,0);
border: 2px solid black;
border-radius: 5px;
}

#square4 {
width: 100px;
height: 100px;
position: absolute;
left: 150px;
top: 400px;
background: rgb(180,0,0);
border: 2px solid black;
border-radius: 5px;
}

#square5 {
width: 100px;
height: 100px;
position: absolute;
left: 650px;
top: 400px;
background: rgb(180,0,0);
border: 2px solid black;
border-radius: 5px;
}

#square6 {
width: 100px;
height: 100px;
position: absolute;
left: 215px;
top: 585px;
background: rgb(180,0,0);
border: 2px solid black;
border-radius: 5px;
}

#square7 {
width: 100px;
height: 100px;
position: absolute;
left: 400px;
top: 650px;
background: rgb(180,0,0);
border: 2px solid black;
border-radius: 5px;
}

#square8 {
width: 100px;
height: 100px;
position: absolute;
left: 585px;
top: 585px;
background: rgb(180,0,0);
border: 2px solid black;
border-radius: 5px;
}

.movingstuff #circle {
width: 75px;
height: 75px;
position: fixed;
left: 412.5px;
top: 412.5px;
background: rgb(28,60,219);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 2px solid black;
opacity: 0.5;
transition: 0.3s;
}

.movingstuff:hover #circle{
opacity: 1;
}

#circle:hover ~ #instructions{
opacity: 0;
}

#circle:hover ~ #howtoplay{
opacity: 0;
}

#circle:hover ~ #three {
animation: numbers 0.5s linear;
-webkit-animation: numbers 0.5s linear;
-moz-animation: numbers 0.5s linear;
animation-delay: 1s;
}

#circle:hover ~ #two {
animation: numbers 0.5s linear;
-webkit-animation: numbers 0.5s linear;
-moz-animation: numbers 0.5s linear;
animation-delay: 2s;
}

#circle:hover ~ #one {
animation: numbers 0.5s linear;
-webkit-animation: numbers 0.5s linear;
-moz-animation: numbers 0.5s linear;
animation-delay: 3s
}

#three {
left: 1110px;
top: 350px;
position: absolute;
opacity: 0;
}

#two {
left: 1110px;
top: 350px;
position: absolute;
opacity: 0;
}

#one {
left: 1110px;
top: 350px;
position: absolute;
opacity: 0;
}


.title {
left: 890px;
top: 75px;
position: absolute;
}

#howtoplay {
left: 890px;
top: 300px;
position: absolute;
transition: 0.5s;
opacity: 1;
}

#instructions {
left: 920px;
top: 350px;
position: absolute;
transition: 0.5s;
opacity: 1;
}

@keyframes numbers {
0%, 100% {opacity: 0;}
50% {opacity: 1;}
}

Answer 1

首先，如果不需要，只需将randomNum附加到字符串中即可。我也使用“ backgroundColor”代替背景。

不要忘记！您的设置CSS而不是Javascript！ rgb（）将调用javascript函数。要将RGB颜色传递给CSS，您必须传递一个字符串。

document.getElementById("square"+randomNum).style.backgroundColor = "rgb(0,200,0)";

我试图重建您想在此Codepen上实现的目标。

https://codepen.io/anon/pen/rZvKWz

JS代码：

window.onload = function(){
  var randomNum = 1;
  setInterval(function(){
         document.getElementById("square"+randomNum).style.backgroundColor = "rgb(180,0,0)";
    randomNum = Math.floor(Math.random() * 8) +1;
      document.getElementById("square"+randomNum).style.backgroundColor = "rgb(0,200,0)";
  },3000);
}

Answer 2

假设您的问题出在JavaScript而非HTML和CSS上，并且您的功能正确（如您所说）。 您需要在倒数3秒结束后触发功能。

因此，执行此操作的一种好方法是使用window.setTimeout()。

根据docs，您可以传递两个参数：第一个参数是callback function，将在您设置下一个参数的时间之后执行，第二个参数是时间（以毫秒为单位）。

一个例子是： window.setTimeout(() => alert("let's do something after 3 seconds!"), 3000);

希望它会有所帮助。

Answer 3

以下是您的代码已更正和简化的内容：

var oldNum;

function color() {
  if (oldNum !== undefined) {
    document.getElementById("square"+oldNum).style.background = 'rgb(180,0,0)';
  }
  
  var num = Math.floor(Math.random() * 8) +1;
  document.getElementById("square"+num).style.background = 'rgb(0,200,0)';
  oldNum = num;
}

setInterval(color, 1000);
color();

body {
  background-image: url("mountain2.jpg");
}

[id^="square"] {
  width: 100px;
  height: 100px;
  position: absolute;
  background: rgb(180,0,0);
  border: 2px solid black;
  border-radius: 5px;
}

#square1 {
left: 215px;
top: 215px;
}

#square2 {
left: 400px;
top: 150px;
}

#square3 {
left: 585px;
top: 215px;
}

#square4 {
left: 150px;
top: 400px;
}

#square5 {
left: 650px;
top: 400px;
}

#square6 {
left: 215px;
top: 585px;
}

#square7 {
left: 400px;
top: 650px;
}


#square8 {
left: 585px;
top: 585px;
}

.movingstuff #circle {
  width: 75px;
  height: 75px;
  position: fixed;
  left: 412.5px;
  top: 412.5px;
  background: rgb(28,60,219);
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  border: 2px solid black;
  opacity: 0.5;
  transition: 0.3s;
}

.movingstuff:hover #circle{
  opacity: 1;
}

#circle:hover ~ #instructions{
  opacity: 0;
}

#circle:hover ~ #howtoplay{
  opacity: 0;
}

#circle:hover ~ #three {
  animation: numbers 0.5s linear;
  -webkit-animation: numbers 0.5s linear;
  -moz-animation: numbers 0.5s linear;
  animation-delay: 1s;
}

#circle:hover ~ #two {
  animation: numbers 0.5s linear;
  -webkit-animation: numbers 0.5s linear;
  -moz-animation: numbers 0.5s linear;
  animation-delay: 2s;
}

#circle:hover ~ #one {
  animation: numbers 0.5s linear;
  -webkit-animation: numbers 0.5s linear;
  -moz-animation: numbers 0.5s linear;
  animation-delay: 3s
}

#three {
  left: 1110px;
  top: 350px;
  position: absolute;
  opacity: 0;
}

#two {
  left: 1110px;
  top: 350px;
  position: absolute;
  opacity: 0;
}

#one {
  left: 1110px;
  top: 350px;
  position: absolute;
  opacity: 0;
}

.title {
  left: 890px;
  top: 75px;
  position: absolute;
}

#howtoplay {
  left: 890px;
  top: 300px;
  position: absolute;
  transition: 0.5s;
  opacity: 1;
}

#instructions {
  left: 920px;
  top: 350px;
  position: absolute;
  transition: 0.5s;
  opacity: 1;
}

@keyframes numbers {
  0%, 100% {opacity: 0;}
  50% {opacity: 1;}
}

<div class="squares"></div>
<div id="square1"></div>
<div id="square2"></div>
<div id="square3"></div>
<div id="square4"></div>
<div id="square5"></div>
<div id="square6"></div>
<div id="square7"></div>
<div id="square8"></div>
<div class="title">
    <img src="title.png" alt="My title">
</div>
<div class="movingstuff">
  <div id="circle"></div>
  <div id="instructions">
    <img src="instructions.png">
  </div>
  <div id="howtoplay">
    <img src="howtoplay.png" alt="Instructions">
  </div>        
  <div id="three">
    <img src="three.png" alt="Three">
  </div>
  <div id="two">
    <img src="two.png" alt="Two">
  </div>
  <div id="one">
    <img src="one.png" alt="One">
  </div>
</div>

正如其他人所说，我减少了JS代码以删除多个if语句。
我使用属性选择器减少了重复的CSS。
我清理了您的HTML。您缺少结束<div>标签。

Answer 4

如果要延迟执行某些功能，可以使用setTimeout函数。

倒数后如何执行JavaScript（如果正确）？

4 个答案: