javascript - 如何在 JavaScript 中使用 setTimeout 显示函数？

问题描述

我用 JavaScript 做了一个测验，希望当计时器到时，它不应该让你再尝试测验并转到显示分数的最后一页。通过调用显示分数displayResult。我有一个 HTML 文件和一个 JS 文件。当我使用setTimeout时，即使时间到了，它也不会显示分数。我认为该函数没有被调用。我尝试过使用setInterval而不是，setTimeout但它仍然不起作用。有人可以告诉我我做错了什么吗？

整个代码在这里。

//timer code in quiz.js

   

const startingMinutes = 1
let time = startingMinutes * 60
const countdownEl = document.getElementById('countdown')
var vri = setInterval(upd, 1000)

function upd() {
  const minutes = Math.floor(time / 60)
  let seconds = time % 60
  
  seconds = seconds < 10 ? '0' + seconds : seconds
  countdownEl.innerHTML = minutes + ":" + seconds
  time--
  time = time < 0 ? 0 : time
  
  if (time == 0) {
    clearInterval(vri);
  }
  
  setTimeout(displayResult, 1000);
}

标签： javascripthtmljquerytimersettimeout

该函数被调用，您可以通过在函数内插入 a 轻松检查这一点console.log()。

当您想在同一页面上显示结果时，首先清除正文并将新创建的元素附加到正文上。

仍然存在一个错误，即您选择的元素将始终为空，但我只是在这里回答您的问题“您如何显示它”。

出于调试目的，我将计时器设置为 6 秒而不是 60 秒。

(function() {
  var allQuestions = [{
    question: "The tree sends downroots from its branches to the soil is know as:",
    options: ["Oak", "Pine", "Banyan", "Palm"],
    answer: 2
  }, {
    question: "Electric bulb filament is made of",
    options: ["Copper", "Aluminum", "lead", "Tungsten"],
    answer: 3
  }, {
    question: "Non Metal that remains liquid at room temprature is",
    options: ["Phophorous", "Bromine", "Clorine", "Helium"],
    answer: 1
  }, {
    question: "Which of the following is used in Pencils ?",
    options: ["Graphite", "Silicon", "Charcoal", "Phosphorous"],
    answer: 0
  }, {
    question: "Chemical formula of water ?",
    options: ["NaA1O2", "H2O", "Al2O3", "CaSiO3"],
    answer: 1
  }, {
    question: "The gas filled in electric bulb is ?",
    options: ["Nitrogen", "Hydrogen", "Carbon Dioxide", "Oxygen"],
    answer: 0
  }, {
    question: "Whashing soda is the comman name for",
    options: ["Sodium Carbonate", "Calcium Bicarbonate", "Sodium Bicarbonate", "Calcium Carbonate"],
    answer: 0
  }, {
    question: "Which gas is not known as green house gas ?",
    options: ["Methane", "Nitrous oxide", "Carbon Dioxide", "Hydrogen"],
    answer: 3
  }, {
    question: "The hardest substance availabe on earth is",
    options: ["Gold", "Iron", "Diamond", "Platinum"],
    answer: 2
  }, {
    question: "Used as a lubricant",
    options: ["Graphite", "Silica", "Iron Oxide", "Diamond"],
    answer: 0
  }];

  var quesCounter = 0;
  var selectOptions = [];
  var quizSpace = $('#quiz');



  nextQuestion();

  $('#next').click(function() {
    chooseOption();
    if (isNaN(selectOptions[quesCounter])) {
      alert('Please select an option !');
    } else {
      quesCounter += 5;
      nextQuestion();
    }
  });

  $('#prev').click(function() {
    chooseOption();
    quesCounter -= 5;
    nextQuestion();
  });

  function createElement(index) {
    var element = $('<div>', {
      id: 'question'
    });
    var header = $('<h2>Question No. ' + (index + 1) + ' :</h2>');
    element.append(header);

    var question = $('<p>').append(allQuestions[index].question);
    element.append(question);
    var radio = radioButtons(index);
    element.append(radio);


    var question1 = $('<p>').append(allQuestions[index + 1].question);
    element.append(question1);
    var radio1 = radioButtons1(index + 1);
    element.append(radio1);


    var question2 = $('<p>').append(allQuestions[index + 2].question);
    element.append(question2);
    var radio2 = radioButtons2(index + 2);
    element.append(radio2);


    var question3 = $('<p>').append(allQuestions[index + 3].question);
    element.append(question3);
    var radio3 = radioButtons3(index + 3);
    element.append(radio3);

    var question4 = $('<p>').append(allQuestions[index + 4].question);
    element.append(question4);

    var radio4 = radioButtons4(index + 4);
    element.append(radio4);




    return element;
  }

  function radioButtons(index) {
    var radioItems = $('<ul>');
    var item;
    var input = '';
    for (var i = 0; i < allQuestions[index].options.length; i++) {
      item = $('<li>');
      input = '<input type="radio" name="answer" value=' + i + ' />';
      input += allQuestions[index].options[i];
      item.append(input);
      radioItems.append(item);

    }
    return radioItems;
  }

  function radioButtons1(index) {
    var radioItems1 = $('<ul>');
    var item1;
    var input1 = '';
    for (var i = 0; i < allQuestions[index].options.length; i++) {
      item1 = $('<li>');
      input1 = '<input type="radio" name="answer1" value=' + i + ' />';
      input1 += allQuestions[index].options[i];
      item1.append(input1);
      radioItems1.append(item1);

    }
    return radioItems1;
  }

  function radioButtons2(index) {
    var radioItems2 = $('<ul>');
    var item2;
    var input2 = '';
    for (var i = 0; i < allQuestions[index].options.length; i++) {
      item2 = $('<li>');
      input2 = '<input type="radio" name="answer2" value=' + i + ' />';
      input2 += allQuestions[index].options[i];
      item2.append(input2);
      radioItems2.append(item2);

    }
    return radioItems2;
  }

  function radioButtons3(index) {
    var radioItems3 = $('<ul>');
    var item3;
    var input3 = '';
    for (var i = 0; i < allQuestions[index].options.length; i++) {
      item3 = $('<li>');
      input3 = '<input type="radio" name="answer3" value=' + i + ' />';
      input3 += allQuestions[index].options[i];
      item3.append(input3);
      radioItems3.append(item3);

    }
    return radioItems3;
  }

  function radioButtons4(index) {
    var radioItems4 = $('<ul>');
    var item4;
    var input4 = '';
    for (var i = 0; i < allQuestions[index].options.length; i++) {
      item4 = $('<li>');
      input4 = '<input type="radio" name="answer4" value=' + i + ' />';
      input4 += allQuestions[index].options[i];
      item4.append(input4);
      radioItems4.append(item4);

    }
    return radioItems4;
  }

  function chooseOption() {
    selectOptions[quesCounter] = +$('input[name="answer"]:checked').val();
    selectOptions[quesCounter + 1] = +$('input[name="answer1"]:checked').val();
    selectOptions[quesCounter + 2] = +$('input[name="answer2"]:checked').val();
    selectOptions[quesCounter + 3] = +$('input[name="answer3"]:checked').val();
    selectOptions[quesCounter + 4] = +$('input[name="answer4"]:checked').val();
  }

  function nextQuestion() {
    quizSpace.fadeOut(function() {
      $('#question').remove();
      if (quesCounter < allQuestions.length) {
        var nextQuestion = createElement(quesCounter);
        quizSpace.append(nextQuestion).fadeIn();
        if (!(isNaN(selectOptions[quesCounter, quesCounter + 1, quesCounter + 2, quesCounter + 3, quesCounter + 4]))) {
          $('input[value=' + selectOptions[quesCounter] + ']').prop('checked', true);
          $('input[value=' + selectOptions[quesCounter + 1] + ']').prop('checked', true);
          $('input[value=' + selectOptions[quesCounter + 2] + ']').prop('checked', true);
          $('input[value=' + selectOptions[quesCounter + 3] + ']').prop('checked', true);
          $('input[value=' + selectOptions[quesCounter + 4] + ']').prop('checked', true);


        }
        if (quesCounter === 1) {
          $('#prev').show();
        } else if (quesCounter === 0) {
          $('#prev').hide();
          $('#next').show();
        }
      } else {
        var scoreRslt = displayResult();
        quizSpace.append(scoreRslt).fadeIn();
        $('#next').hide();
        $('#prev').hide();
      }
    });
  }

  const startingMinutes = 0.1;
  let time = startingMinutes * 60
  const countdownEl = document.getElementById('countdown')
  var vri = setInterval(upd, 1000)

  function upd() {
    const minutes = Math.floor(time / 60)
    let seconds = time % 60
    seconds = seconds < 10 ? '0' + seconds : seconds
    countdownEl.innerHTML = minutes + ":" + seconds
    time--
    time = time < 0 ? 0 : time
    console.log(time);
    if (time === 0) {
      clearInterval(vri);
      setTimeout(displayResult, 1000);
    }

  }


  function displayResult() {

    console.log(selectOptions);
    var correct = 0;
    console.log(selectOptions);
    for (var i = 0; i < selectOptions.length; i++) {
      if (selectOptions[i] === allQuestions[i].answer) {
        correct++;
      }
    }

    document.body.innerHTML = "";
    let score = document.createElement("p");
    score.id = 'question';
    if (correct === 0 && correct <= 5) {
      let otherText = document.createTextNode("YOUR IQ SCORES LIES IN THE RANGE OF 70 and 79 WHICH IS CLASSIFIED AS BORDERLINE");
      let img = document.createElement("img");
      img.src = "img9b.png"


      score.append(otherText)
      score.append(img);
    } else {
      let tex = document.createTextNode("The Result is: " + correct);
      score.appendChild(tex);

    }
    document.body.appendChild(score);

  }
})();

<html>

<head>
  <title>Make Quiz Website</title>
  <link rel="stylesheet" href="quiz.css">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>

<body>
  <div id="container">
    <h1>Quiz Website Using JavaScript</h1>
    <br/>
    <div id="quiz"></div>
    <p id="countdown">30:00</p>
    </h1>
    <div class="button" id="next"><a href="#">Next</a></div>
    <div class="button" id="prev"><a href="#">Prev</a></div>
  </div>


  <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
  <script src="quiz.js"></script>
</body>

</html>

javascript - 如何在 JavaScript 中使用 setTimeout 显示函数？

问题描述

解决方案

推荐阅读