倒数计时器计数太远

Question

我正在尝试制作一个游戏来测试您在一分钟内可以单击 div 多少次。 我无法正确倒计时 function。 我的倒计时应该停止在 0，但在达到 0 后它会继续。我的代码如下。 有任何想法吗？

 let div = document.getElementById("div"); let score = document.querySelector("h3"); let time = document.querySelector("span"); var jsTime = 60; var jsScore = 0; alert("Click inside the box as many times as you can in one minute. \n Ready?"); var clicker = div.addEventListener("click", function() { jsScore++; score.innerHTML = jsScore; }, 1); var i = 60; setInterval(function() { if (i > 1) { jsTime--; time.innerHTML = jsTime; } else { removeEventListener(clicker); } }, 1000);

 #div { text-align: center; width: 100px; height: 100px; background: black; color: white; } #container { display: inline-block; }

 <h1>Click inside the box as many times as you can in one minute.</h1> <br> <div id="container"> <h2>Time:</h2><span>60</span>&nbsp;&nbsp;&nbsp;&nbsp; <h2>Score:</h2> <h3>0</h3> </div> <div id="div"></div>

Answer 1

只要i is > 1 ，您就会减少jsTime ，这将永远是，因为您永远不会减少i的值。 我认为您的意思是在条件中使用jsTime 。 将其重命名为赋予它一些上下文的东西可能会使它更容易理解。 例如remainingTimeSeconds 。 请参阅下面的修改后的代码。

   let div = document.getElementById("div");
        let score = document.querySelector("h3");
        let time = document.querySelector("span");
        var jsTime = 60;
        var jsScore = 0;
        alert("Click inside the box as many times as you can in one minute. \n Ready?");

        var clicker = div.addEventListener("click", function() {
            jsScore++;
            score.innerHTML = jsScore;
        },1);



        setInterval(function() {
            // As long as there is time left, keep decreasing it, and update the time element's innerHTML with the new current time.
            if (jsTime > 1){
                jsTime--;
                time.innerHTML = jsTime;
            } else {
                removeEventListener(clicker);
            }
        },1000);