如何在倒计时后执行JavaScript（如果正确的话）？

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

---

如果要执行某个延迟的函数，可以使用

setTimeout

函数。

首先，不需要使用If，只需将

randomNum

附加到字符串中即可。我还使用了“背景色”而不是背景色

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

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

我试图重建你想要在这个密码笔上实现的目标

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);
}

---

假设您的问题是JavaScript，而不是HTML和CSS，并且您的函数是正确的（如您所说）倒计时3秒结束后，您需要触发函数

因此，一个很好的方法是使用

window.setTimeout（）

根据，可以传递两个参数：第一个是

回调函数

，将在下一个参数中设置的时间之后执行，第二个是以毫秒为单位的某个时间

例如：

window.setTimeout（（）=>alert（“让我们在3秒后做点什么！”），3000）

希望能有所帮助。
以下是您的代码更正和简化：


var-oldNum；
函数颜色（）{
如果（oldNum！==未定义）{
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（0200,0）'；
oldNum=num；
}
设置间隔（颜色，1000）；
颜色（）
正文{
背景图片：url（“mountain2.jpg”）；
}
[id^=“square”]{
宽度：100px；
高度：100px；
位置：绝对位置；
背景：rgb（180,0,0）；
边框：2件纯黑；
边界半径：5px；
}
#平方1{
左：215px；
顶部：215px；
}
#平方2{
左：400px；
顶部：150px；
}
#平方3{
左：585px；
顶部：215px；
}
#平方4{
左：150px；
顶部：400px；
}
#平方5{
左：650px；
顶部：400px；
}
#平方6{
左：215px；
顶部：585px；
}
#平方7{
左：400px；
顶部：650px；
}
#平方8{
左：585px；
顶部：585px；
}
.movingstuff#圆{
宽度：75px；
高度：75px；
位置：固定；
左：412.5px；
顶部：412.5px；
背景：rgb（28,60219）；
-moz边界半径：50px；
-webkit边界半径：50px；
边界半径：50px；
边框：2件纯黑；
不透明度：0.5；
过渡：0.3s；
}
.movingstuff:悬停#圆圈{
不透明度：1；
}
#圆圈：悬停~#说明{
不透明度：0；
}
#圆圈：悬停~#如何播放{
不透明度：0；
}
#圆圈：悬停~#三{
动画：数字0.5s线性；
-webkit动画：数字0.5s线性；
-moz动画：数字0.5s线性；
动画延迟：1s；
}
#圆圈：悬停~#2{
动画：数字0.5s线性；
-webkit动画：数字0.5s线性；
-moz动画：数字0.5s线性；
动画延迟：2s；
}
#圆圈：悬停~#一{
动画：数字0.5s线性；
-webkit动画：数字0.5s线性；
-moz动画：数字0.5s线性；
动画延迟：3s
}
#三{
左：1110px；
顶部：350px；
位置：绝对位置；
不透明度：0；
}
#两个{
左：1110px；
顶部：350px；
位置：绝对位置；
不透明度：0；
}
#一个{
左：1110px；
顶部：350px；
位置：绝对位置；
不透明度：0；
}
.头衔{
左：890px；
顶部：75px；
位置：绝对位置；
}
#howtoplay{
左：890px；
顶部：300px；
位置：绝对位置；
过渡：0.5s；
不透明度：1；
}
#指示{
左：920px；
顶部：350px；
位置：绝对位置；
过渡：0.5s；
不透明度：1；
}
@关键帧数字{
0%，100%{不透明度：0；}
50%{不透明度：1；}
}

好的，所以去掉所有的“if”语句，用
document.getElementById（“square”+randomNum）.style.backgroundColor=“rgb（0200,0）”替换它们我添加了一个代码笔，我想它可以满足您的需要@你创建的函数调用了什么？我想我只需要使用按钮onclick并添加一个超时来运行它（为自己的无知道歉）@filipIn您编写的代码笔，这样我就可以使用
@filipI更新了代码笔来执行代码。该函数现在有了一个名称@罗曼约扎夫
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;}
}

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

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);
}