在 timeLeft = 0 时重置计时器

Question

I've been trying for the better part of three days to create a quiz-like website, with a timer to encourage the user to hurry up and submit their answers.三天的大部分时间里，我一直在尝试创建一个类似测验的网站，并有一个计时器来鼓励用户快点提交他们的答案。 It's a very simple program, nothing special, but I'm having a great whacking issue with the timer.这是一个非常简单的程序，没什么特别的，但是我的计时器遇到了很大的问题。 The timer, when it runs out, is supposed to redirect the person to the start of the page with a message "You took too long! Hurry up there will ya?".当计时器用完时，应该将这个人重定向到页面的开头，并显示一条消息“你花了太长时间！快点好吗？”。 It will show the message, but the text will not change from "Finished".它将显示消息，但文本不会从“已完成”更改。 For reference, here is the code供参考，这里是代码

HTML HTML

<body onLoad="initialize()">
  <div id="lightbox" onclick="closeLightBox()">
  <div id="message"></div>
  </div>
    <div id="countdown"></div>

Javascript Javascript

var currentQuestion = 0;
var score = 0;

//Timer
var timeleft = 25;
var downloadTimer = setInterval(function(){
  if(timeleft <= 0 || currentQuestion == 10){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Finished";
    message = "You took too long! Hurry up there will ya?";
      document.getElementById("message").innerHTML = message;
      document.getElementById("lightbox").style.display="block";
        currentQuestion = 0;
        score = 0;
        timeleft = 25;  
        document.getElementById("score").innerHTML = score + " / " + questions.length;
  } else {
    document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  }
  timeleft -= 1
}, 1000); //End Timer

I'm relatively new to this all, so if I've done something wrong please do let me know我对这一切都比较陌生，所以如果我做错了什么，请告诉我

Answer 1

The problem is that you only have one test, which assumes that the time ran out and you didn't answer properly.问题是你只有一个测试，它假设时间用完并且你没有正确回答。 You need another condition that checks for time running out and you did answer properly.您需要另一个条件来检查时间是否已用完，并且您确实回答了正确的问题。

I've also moved some things around in both your HTML and your JavaScript.我还在你的 HTML 和 JavaScript 中移动了一些东西。 See the comments for details.有关详细信息，请参阅评论。

 .hidden { display:none; }

 <body> <div id="lightbox" onclick="closeLightBox()"> <div id="message"></div> </div> <div id="countdown"></div> <div id="score"></div> <!-- Placing your script just prior to the closing body tag, eliminates the need for a body.onload event handler. --> <script> // Get the references to the elements you'll use over and over // just once let countdown = document.getElementById("countdown"); let message = document.getElementById("message"); let lightbox = document.getElementById("lightbox"); let scoreArea = document.getElementById("score"); var currentQuestion = 0; var score = 0; var questions = []; //Timer var timeleft = 2; var downloadTimer = setInterval(function() { countdown.textContent = timeleft + " seconds remaining"; if (timeleft <= 0 && currentQuestion == 0) { clearInterval(downloadTimer); // Don't use .innerHTML when the string you are working with doesn't // contain any HTML as .innerHTML has security and performance impplications. // Use .textContent for plain strings. message.textContent = "You took too long! Hurry up there will ya?"; lightbox.classList.remove("hidden"); currentQuestion = 0; score = 0; timeleft = 25; } else if(timeleft <= 0) { scoreArea.textContent = score + " / " + questions.length; countdown.textContent = "Finished"; } timeleft -= 1; }, 1000); //End Timer </script> </body>

在 timeLeft = 0 时重置计时器

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-10-12 00:03:08

在 timeLeft = 0 时重置计时器

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-10-12 00:03:08

解决方案1
0 已采纳 2020-10-12 00:03:08