如何正确使用javascript显示计时器? [英] How to display Timer using javascript properly?
本文介绍了如何正确使用javascript显示计时器?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
首先，我正在使用 JavaScript 开发测验应用程序.我在测验顶部显示计时器，但在 0:0 之后显示负计时器，到达后需要显示结果容器以及分数以及完成所需的时间.所以我坚持使用负计时器，我需要在 JavaScript 代码中更改什么.
HTML:
<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',类型:'GET'，异步:真，数据类型:json"，成功:功能(数据){问题=数据；加载问题()；}});//-----------------------------------------var currentQuestion = 0;无功分数 = 0;var totQuestions = 8;var AnswerOption = null;函数 loadQuestion(){重置颜色()；enableAll();//问题索引= 0var questionEl = document.getElementById("问题");var opt1 = document.getElementById("opt1");var opt2 = document.getElementById("opt2");var opt3 = document.getElementById("opt3");var opt4 = document.getElementById("opt4");questionEl.innerHTML = (currentQuestion + 1) + '.' + 问题[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;}//--------------------------------------------------------------------------函数加载下一个问题(){重置颜色()；enableAll();var selectedOption = document.querySelector('input[type=radio]:checked');如果(！selectedOption){alert('请选择您的答案！');返回;}var answer = selectedOption.value;如果(问题[currentQuestion].answer == answer){得分 += 10;}selectedOption.checked = false;当前问题++；var nextButton = document.getElementById('nextButton');if (currentQuestion == totQuestions - 1) {nextButton.innerHTML = '完成';}var container = document.getElementById('quizContainer');var resultCont = document.getElementById('result');if (currentQuestion == totQuestions) {container.style.display = '无';resultCont.style.display = '';控制台日志(分数)；if(score == 0 || score <40){resultCont.innerHTML = '你的分数:' + score + '/80' + '
'+'你失败了，下次试试！！'+'
'+'<a href="/">首页</a>'+ '
'+ '<div class="fb-share-button" data-href="https://herokuapp.quiz_django1.com/" data-layout="button_count" data-size="large"><a目标="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"类="fb-xfbml-parse-ignore">分享</a></div>';}别的 {resultCont.innerHTML = '你的分数:' + score + '/80' +'
'+'你通过了.下次试试！！'+'
'+ '<a href="/">首页</a>'+'
'+ '<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&src=sdkpreparse" class="fb-xfbml-parse-ignore">分享</a></div>';}返回;}加载问题(当前问题)；}//-------------------------------------------------------------------------------功能检查(){重置颜色()；var selectedOption = document.querySelector('input[type=radio]:checked');如果(selectedOption == AnswerOption){selectedOption.parentNode.style.backgroundColor = "绿色";nextButton.innerHTML = '下一步';} 别的 {selectedOption.parentNode.style.backgroundColor = "红色";AnswerOption.parentNode.style.backgroundColor = "绿色";nextButton.style.backgroundColor = "白色";nextButton.innerHTML = '下一步';}禁用所有();}//------------------------------------------------------------------------函数 disableAll(){let options = document.querySelectorAll("input[type=radio]");for(let i = 0; i < options.length; ++i){options[i].setAttribute("disabled","true");}}//-----------------------------------------------------------------函数 enableAll(){let options = document.querySelectorAll("input[type=radio]");for(let i = 0; i < options.length; ++i){options[i].removeAttribute("disabled");}}//----------------------------------------------------------功能重置颜色(){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 = "无";nextButton.innerHTML = '';}}加载问题(当前问题)；timer.js:
var counter = 0;var timeleft = 300;功能设置(){var timer = document.getElementById('timer');timer.innerHTML = convertSeconds(timeleft - counter);函数 timeIt(){计数器++；timer.innerHTML =convertSeconds(timeleft - counter);}setInterval(timeIt, 1000);var params = getURLParams();如果(参数.分钟){var min = params.minute;剩余时间 = 分钟 * 60；}}函数 convertSeconds(s){var min = Math.floor(s/60);var 秒 = s % 60;返回分钟 + ':' + 秒；}设置();完成后需要显示计分板的时间.以及完成测验所需的时间.loadNextQuestion 函数的resultCont"变量中存在的内容.
解决方案
我不得不创建一次测验，我使用该代码进行计时
var data_array = [[测验中的问题 1?"、答案 1"、答案 2"、答案 3"、答案 4"、2]、["问题 2?","Answer1","Answer2","Answer3","Answer4",4],/*数字是正确答案*/];无功加= 0;无功时间= 0;var cur_answer = 0;var count_answer = data_array.length;功能秒(){时间++；document.getElementById('time').innerHTML='传递时间:'+时间+'秒';}Firstly I am developing the quiz application using JavaScript. I am displaying the timer on the top of quiz but after 0:0 it is display negative timer, after reaching it need to display the results container along with score and how much time it taken to complete. So I stuck at the negative timer what I need to change in the JavaScript code.
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&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&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();
After Completion of the time it need to display the score board. Along with how much time taken to complete the quiz. The content which is present in the "resultCont" variable in the loadNextQuestion function.
解决方案
I had to create quiz once and I used that code for time counting
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';
}
这篇关于如何正确使用javascript显示计时器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
