Javascript 测验计时器

Question

您好，我正在使用 javascript 进行测验，但我很难安装一个正常运行的倒数计时器。这可能是一个简单的问题，但我怎样才能做到这一点，以便一旦计时器达到零，它就会提交测验并告诉用户时间到了？我尝试了几种不同的方法，但无济于事。感谢您的帮助。

我的倒计时代码:

<script>

var total_seconds = 30*1;
var c_minutes = parseInt(total_seconds/60);
var c_seconds = parseInt(total_seconds%60);

function CheckTime(){
document.getElementById("quiz-time-left").innerHTML
= 'Time Left: ' + c_minutes + ' minutes ' + c_seconds + ' seconds ' ;

if(total_seconds <=0){
setTimeout('document.quiz.submit()',1);
} else {
total_seconds = total_seconds -1;
c_minutes = parseInt(total_seconds/60);
c_seconds = parseInt(total_seconds%60);
setTimeout("CheckTime()",1000);
}}
setTimeout("CheckTime()",1000);
</script> 

我的测验代码:

    <form name="form" onsubmit="return score()">
    <h3>1. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q1" value="a">a. 1<br>
    <input type="radio" name="q1" value="b">b. 2<br>
    <input type="radio" name="q1" value="c">c. 3<br>
    <input type="radio" name="q1" value="d">d. 4<br>

    <form name="form" onsubmit="return score()">
    <h3>1. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q2" value="a">a. 1<br>
    <input type="radio" name="q2" value="b">b. 2<br>
    <input type="radio" name="q2" value="c">c. 3<br>
    <input type="radio" name="q2" value="d">d. 4<br>

    <form name="form" onsubmit="return score()">
    <h3>1. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q3" value="a">a. 1<br>
    <input type="radio" name="q3" value="b">b. 2<br>
    <input type="radio" name="q3" value="c">c. 3<br>
    <input type="radio" name="q3" value="d">d. 4<br>
    <br>
    <input type="submit" id="sendA" value="Submit">
    <br>
    <p id="p"></p>

</form>

</html>

<script> 

function score()
{
    //Referencing the value of the questions
    var q1 = document.forms.form.q1.value;
    var q2 = document.forms.form.q2.value;
    var q3 = document.forms.form.q3.value;

    //Array for the questions
    var questions = [q1, q2, q3];

    //Answers for each question
    var answers = ["b", "b", "b"];

    //variable to keep track of the points
    var points = 0;
    var total = 3;
    //max score 

    //Making use of a for loop to iterate over the questions and answers arrays
    for (var i = 0; i < total; i++)
    {
    if (questions[i] == answers[i]) {
            points = points + 1; //Increment the score by 2 for every correct answer given
        }
    }

    //CSS for questions
    var q = document.getElementById("p");

    q.style.fontSize = "40px";
    q.style.textAlign = "center";
    q.innerHTML = "You got " + points + " out of " + total;

    return false;
}

    </script>

Answer 1

你的html被分成了几种形式，你只需要一种。你错过了你的例子中剩下的测验时间 div 所以我把它添加到顶部。作为一点额外的触摸，我在计时器用完时禁用了输入。

var total_seconds = 30 * 1;
var c_minutes = parseInt(total_seconds / 60);
var c_seconds = parseInt(total_seconds % 60);
var timer;

function CheckTime() {
  document.getElementById("quiz-time-left").innerHTML = 'Time Left: ' + c_minutes + ' minutes ' + c_seconds + ' seconds ';

  if (total_seconds <= 0) {
    score();
  } else {
    total_seconds = total_seconds - 1;
    c_minutes = parseInt(total_seconds / 60);
    c_seconds = parseInt(total_seconds % 60);
    timer = setTimeout(CheckTime, 1000);
  }
}
timer = setTimeout(CheckTime, 1000);

function score() {
  // stop timer
  clearInterval(timer);

  //Referencing the value of the questions
  var q1 = document.forms.form.q1.value;
  var q2 = document.forms.form.q2.value;
  var q3 = document.forms.form.q3.value;

  // disable form
  var elements = document.getElementById("questions").elements;
  for (var i = 0, len = elements.length; i < len; ++i) {
    elements[i].disabled = true;
  }

  //Array for the questions
  var questions = [q1, q2, q3];

  //Answers for each question
  var answers = ["b", "b", "b"];

  //variable to keep track of the points
  var points = 0;
  var total = 3;
  //max score 

  //Making use of a for loop to iterate over the questions and answers arrays
  for (var i = 0; i < total; i++) {
    if (questions[i] == answers[i]) {
      points = points + 1; //Increment the score by 2 for every correct answer given
    }
  }

  //CSS for questions
  var q = document.getElementById("p");

  q.style.fontSize = "40px";
  q.style.textAlign = "center";
  q.innerHTML = "You got " + points + " out of " + total +
    "<br />" +
    "you used " + (29 - Math.floor(total_seconds)) + " seconds";

  return false;
}

<div id="quiz-time-left">

</div>
<form name="form" id="questions" onsubmit="return score()">
  <h3>1. How many yellow cards equal a red card in football?</h3>
  <input type="radio" name="q1" value="a">a. 1<br>
  <input type="radio" name="q1" value="b">b. 2<br>
  <input type="radio" name="q1" value="c">c. 3<br>
  <input type="radio" name="q1" value="d">d. 4<br>

  <h3>1. How many yellow cards equal a red card in football?</h3>
  <input type="radio" name="q2" value="a">a. 1<br>
  <input type="radio" name="q2" value="b">b. 2<br>
  <input type="radio" name="q2" value="c">c. 3<br>
  <input type="radio" name="q2" value="d">d. 4<br>

  <h3>1. How many yellow cards equal a red card in football?</h3>
  <input type="radio" name="q3" value="a">a. 1<br>
  <input type="radio" name="q3" value="b">b. 2<br>
  <input type="radio" name="q3" value="c">c. 3<br>
  <input type="radio" name="q3" value="d">d. 4<br>
  <br>
  <input type="submit" id="sendA" value="Submit">
  <br>
  <p id="p"></p>

</form>