如何为每个问题创建测验倒数计时器

Question

我想为测验创建一个倒数计时器，该测验将在下一个问题上重置，如果时间用完并且玩家尚未选择答案，也可以转到下一个问题。任何人都可以帮我创建这个吗？

var counter = 10;

setInterval(function () {

  counter--;

  if (counter >= 0) {

    id = document.getElementById('count');

    id.innerHTML = counter;

  }

  if (counter === 0) {

    id.innerHTML = 'Times Up!';

  }

}, 1000);

'''

Answer 1

这是适合您的基本工作代码。玩一玩它以获得您想要的结果。祝您编码愉快！var counter = 10;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//Time countervar questionsCount = 0;&nbsp; &nbsp; &nbsp; &nbsp;//Questions counter//Questions arrayvar questions = [&nbsp; &nbsp;"Question 1","Question 2","Question 3"]&nbsp;questionDivId =&nbsp; document.getElementById('question');setInterval(function () {&nbsp; &nbsp; counter--;&nbsp; &nbsp; if (counter >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; id = document.getElementById('count');&nbsp; &nbsp; &nbsp; &nbsp; id.innerHTML = counter;&nbsp; &nbsp; }&nbsp; &nbsp; if (counter === 0) {&nbsp; &nbsp; &nbsp; &nbsp; id.innerHTML = 'Times Up!';&nbsp; &nbsp; &nbsp; &nbsp; counter = 10;&nbsp; &nbsp; &nbsp; &nbsp; questionsCount++;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //To check if all questions are completed or not&nbsp; &nbsp; if (questionsCount === questions.length){&nbsp; &nbsp; &nbsp; &nbsp; questionDivId.innerHTML = "Well Played! Game is over";&nbsp; &nbsp; &nbsp; &nbsp; id.innerHTML = "";&nbsp; &nbsp; } else{&nbsp; &nbsp; &nbsp; &nbsp; questionDivId.innerHTML = questions[questionsCount];&nbsp; &nbsp; }&nbsp; &nbsp;}, 1000);//To go to the next questionfunction goToNextQuestion() {&nbsp; &nbsp; questionsCount++;&nbsp; &nbsp; counter = 10;}<div>&nbsp; &nbsp; <h1 id="question"></h1>&nbsp; &nbsp; <h1 id="count"></h1>&nbsp; &nbsp; <button onclick="goToNextQuestion()">Next</button></div>