时间戳

首页 > 解决方案 > 如何让我的 JavaScript（如果正确）在倒计时后执行？

javascript - 如何让我的 JavaScript（如果正确）在倒计时后执行？

问题描述

基本上，我创建了一个网页，其中包含反应时间游戏。圆形图案中有 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;}
}

标签： javascripthtmlcss

解决方案

假设您的问题出在 JavaScript 而不是 HTML 和 CSS，并且您的功能是正确的（如您所说）。您需要在倒计时 3 秒后触发您的功能。

因此，一个很好的方法是使用window.setTimeout().

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

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

希望它有所帮助。

推荐阅读