如何正确使用JavaScript显示计时器？

问题描述 投票：1回答：2

首先，我正在使用JavaScript开发测验应用程序。我在测验的顶部显示计时器，但0：0之后显示负计时器，到达计时器后需要显示结果容器以及得分和完成所需的时间。因此，我在负计时器上停留了我需要在JavaScript代码中进行更改的内容。

HTML：

<div id="question" class="question"></div>
<label class="option"><input type="radio" name="option" value="1" onchange="check(this);"/> <span id="opt1"></span></label>
<label class="option"><input type="radio" name="option" value="2" onchange="check(this);" /> <span id="opt2"></span></label>
<label class="option"><input type="radio" name="option" value="3" onchange="check(this);"/> <span id="opt3"></span></label>
<label class="option"><input type="radio" name="option" value="4" onchange="check(this);"/> <span id="opt4"></span></label>
<button id="nextButton" class="next-btn" onclick="loadNextQuestion();">Next </button>

Js：

   var questions = [];
  $.ajax({
    url: 'http://127.0.0.1:8000/api2/?format=json',
    type:'GET',
    async:true,
    dataType: "json",
    success: function(data)
     {
        questions = data ;
        loadQuestion();

     }
});



//------------------------------------------
  var currentQuestion = 0;
  var score = 0;
  var totQuestions = 8;
  var AnswerOption = null;

  function loadQuestion() 
  {
    resetColor();
    enableAll();
    //questionIndex = 0
    var questionEl = document.getElementById("question");
    var opt1 = document.getElementById("opt1");
    var opt2 = document.getElementById("opt2");
    var opt3 = document.getElementById("opt3");
    var opt4 = document.getElementById("opt4");

    questionEl.innerHTML = (currentQuestion + 1) + '. ' + questions[currentQuestion].question;
    opt1.innerHTML = questions[currentQuestion].option1;
    opt2.innerHTML = questions[currentQuestion].option2;
    opt3.innerHTML = questions[currentQuestion].option3;
    opt4.innerHTML = questions[currentQuestion].option4;

    if(1 == parseInt(questions[currentQuestion].answer)) AnswerOption = opt1;
    if(2 == parseInt(questions[currentQuestion].answer)) AnswerOption = opt2;
    if(3 == parseInt(questions[currentQuestion].answer)) AnswerOption = opt3;
    if(4 == parseInt(questions[currentQuestion].answer)) AnswerOption = opt4;
  } 

  //--------------------------------------------------------------------------
  function loadNextQuestion() {
    resetColor();
    enableAll();
    var selectedOption = document.querySelector('input[type=radio]:checked');
    if (!selectedOption) {
      alert('Please select your answer!');
      return;
    }
    var answer = selectedOption.value;
    if (questions[currentQuestion].answer == answer) {
      score += 10;
    }

    selectedOption.checked = false;
    currentQuestion++;

    var nextButton = document.getElementById('nextButton');
    if (currentQuestion == totQuestions - 1) {
      nextButton.innerHTML = 'Finish';
    }

    var container = document.getElementById('quizContainer');
    var resultCont = document.getElementById('result');
    if (currentQuestion == totQuestions) {
      container.style.display = 'none';
      resultCont.style.display = '';
      console.log(score);
      if(score == 0 || score < 40)
      {
          resultCont.innerHTML = 'Your Score: ' + score + '/80' + '<br>' + 
          'You are failed.Try next time!!'+'<br>' +
           '<a href ="/">Home</a>' + '<br>' + '<div class="fb-share-button" data-href="https://herokuapp.quiz_django1.com/" data-layout="button_count" data-size="large"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>';
      }
      else {
        resultCont.innerHTML = 'Your Score: ' + score + '/80' + 
        '<br>' + 
        'You are passed.Try next time!!'+
        '<br>' + '<a href ="/">Home</a>'+ 
        '<br>' + '<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="large"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>' ;
    }

      return;
    }


    loadQuestion(currentQuestion);
  }

  //-------------------------------------------------------------------------------
  function check() {
    resetColor();
    var selectedOption = document.querySelector('input[type=radio]:checked');
    if (selectedOption == AnswerOption) {
      selectedOption.parentNode.style.backgroundColor = "green";
      nextButton.innerHTML = 'Next';

    } else {
      selectedOption.parentNode.style.backgroundColor = "red";
      AnswerOption.parentNode.style.backgroundColor = "green";
      nextButton.style.backgroundColor = "white";
      nextButton.innerHTML = 'Next';

    }
    disableAll();
  }

  //------------------------------------------------------------------------
  function disableAll(){
    let options = document.querySelectorAll("input[type=radio]");
    for(let i = 0; i < options.length; ++i){
      options[i].setAttribute("disabled","true");
    }
  }

  //-----------------------------------------------------------------
  function enableAll(){
    let options = document.querySelectorAll("input[type=radio]");
    for(let i = 0; i < options.length; ++i){
      options[i].removeAttribute("disabled");
    }
  }

  //----------------------------------------------------------
  function resetColor(){
    let options = document.querySelectorAll("input[type=radio]");
    for(let i = 0; i < options.length; ++i){
      options[i].parentNode.style.background = "none";
      // nextButton.innerHTML = '';
      nextButton.style.background = "none";
      nextButton.innerHTML = '';


    }
  }


  loadQuestion(currentQuestion);

timer.js：

var counter = 0;
var timeleft = 300;



function setup(){

    var timer =  document.getElementById('timer');
    timer.innerHTML = convertSeconds(timeleft - counter);
    function timeIt(){
        counter++;
        timer.innerHTML =convertSeconds(timeleft - counter);

    }
    setInterval(timeIt, 1000);

    var params = getURLParams();
    if(params.minute){
        var min = params.minute;
        timeleft = min * 60;
    }
}

function convertSeconds(s){
    var min = Math.floor(s / 60);
    var sec = s % 60;
    return min + ':' + sec;
}


setup();

完成时间后，需要显示计分板。以及完成测验所需的时间。在loadNextQuestion函数的“ resultCont”变量中存在的内容。

javascript html css
2个回答
0
投票

您正在将显示更改为“ LoadNextQuestion”函数内部的结果。我将结果的显示提取到一个单独的函数中，例如：“ displayResults（）”。

然后，在计时器设置功能内：

首先，创建一个变量以捕获您的区间参考...2，在timeIt内部函数中...检查0，然后停止Interval并调用displayResults（）

执行类似操作：

var timerInterval;

function timeIt(){
    counter++;
    if(timeleft - counter <= 0){
        clearInterval(timerInterval);
        timer.innerHTML = convertSeconds(0);
        displayResults();
    }
    else {
        timer.innerHTML = convertSeconds(timeleft - counter);
    }    
}

timerInterval = setInterval(timeIt, 1000);
0
投票

我必须创建一次测验，然后使用该代码进行计时

var data_array = [
      ["Question 1 in your quiz?","Answer1","Answer2","Answer3","Answer4",2], 
      ["Question 2?","Answer1","Answer2","Answer3","Answer4",4],/*number is correct answer*/
    ];

    var plus = 0;
    var time = 0;
    var cur_answer = 0;
        var count_answer = data_array.length;

    function sec() {
        time++; 
        document.getElementById('time').innerHTML='Passing time: ' + time + ' sec';
    }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.