Question

我正在尝试创建一个计时器，当点击0时，不仅会向用户显示HTML网页中的时间已用完，而且还会重定向用户。（在这种情况下，作为测试，Youtube）。我的计时器出现问题，并且显示时间耗尽，并在时间用完后将用户重定向到其他页面。

我的问题包括，计时器总是落后一秒钟。（在这种情况下，因为我已经将计时器初始化为20秒，它会实际上开始了19）。
计时器运行时的innerHTML不显示。我测试过了这有一个按钮，带有onclick事件，文本确实出现了，所以我相信我的If语句是由于错误造成的。
当计时器达到零时，页面不会重定向。再一次，我用一个按钮测试了这个，带有一个onclick事件，页面就是这样重定向。我再次相信，我的If声明在这里是错误的。

我试图自己调试程序没有运气。

帮助将是学徒。

以下是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Timer </title>
</head>

<body onload="Timer(),reload(), endTimer();">
<!-- Works as button <input type="button" value="stop" onclick="endTimer();"> -->
<span id="countdown" class="timer"> </span>


<script>

    var userTime = 20;

    function Timer(){
    timeStart = setInterval(function(){
    userTime--;
    document.getElementById("countdown").innerHTML = "Time remaining: " + userTime;
    }, 1000 );}

        if (userTime == 0){

    function endTimer(){
    clearInterval (timeStart);
    document.getElementById("countdown").innerHTML = "Time ran out";
    }

    function reload(){
    window.location = "http://youtube.com";
    }}

</script>
</body>

</html>

感谢。

Answer 1

这个怎么样？我没有尽可能地更改你的代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Timer </title>
</head>

<body onload="startTimer();">
<!-- Works as button <input type="button" value="stop" onclick="endTimer();"> -->
<span id="countdown" class="timer"> </span>

<script>
    var userTime = 20;

    function startTimer(){
        var timeInterval = setInterval(function(){
            if (userTime === 0) {
                clearInterval(timeInterval);
                endTimer();
                reload();
            } else {
                document.getElementById("countdown").innerHTML = "Time remaining: " + userTime;
                userTime--;
            }
        }, 1000);
    }


    function endTimer() {   
        document.getElementById("countdown").innerHTML = "Time ran out";
    }

    function reload(){
        window.location.href = "http://youtube.com";
    }
</script>
</body>

</html>

（您可以对其进行测试here。）

我认为主要原因为什么您的代码无法正常工作：触发onload事件时，Timer()，reload()，endTimer()将同时被调用，而不是您预期的。（你可以查看here。）

所以我按顺序调用函数。

更新

如果else语句不存在，您将无法看到消息"Time ran out"。

Answer 2

试试这个

var userTime = 20;

function Timer() {

  timeStart = setInterval(function() {
    document.getElementById("countdown").innerHTML = "Time remaining: " + userTime;
    userTime--;
    if (userTime === 0) {
      endTimer();
      reload();
    }
  }, 1000);
}

function endTimer() {
  clearInterval(timeStart);
  document.getElementById("countdown").innerHTML = "Time ran out";
}

function reload() {
  window.location.href = "http://youtube.com";
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<body onload="Timer()">
<!-- Works as button <input type="button" value="stop" onclick="endTimer();"> -->
<span id="countdown" class="timer"> </span>
</body>
</html>

Answer 3

setInterval函数中的回调是异步执行的。但是，在调用设置时间后，您已尝试立即检查userTime值。在那一刻，它的值为0.所以你必须把你的条件放在setInterval方法中的回调函数中。

＆＃13;

   
    var userTime = 5;

    function Timer(){
    var timeStart = window.setInterval(()=>{
       
        if (userTime == 0)
        {
            window.clearTimeout(timeStart);
            redirect();
        }
               
        document.getElementById("countdown").innerHTML = "Time remaining: " + userTime;
        userTime--;
    }, 1000);
    }
    
    function redirect()
    {
        window.location.assign("http://www.youtube.com");
    }
    
    Timer();

＆＃13;

<span id="countdown" class="timer"> </span>

＆＃13;

clearInterval和window.reload不适用于Timer

3 个答案:

更新