Привет, я делаю викторину, используя 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>
Я думаю, вы бы хотели, чтобы все вопросы были в одной форме.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Ваш 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>Конечно, я остановил таймер, когда вы нажимаете кнопку «Отправить», значит, у вас осталось время total_seconds
Это переводит вас на другую страницу? На какую страницу вас отправили? Фрагмент кода в моем ответе ведет вас на другую страницу?
Чем бы Вы хотели заняться? В моем коде таймер останавливается, а вопросы отключаются.
Зачем использовать setTimeout. В этом случае я думаю, что setInterval подойдет лучше.
попробуйте посмотреть мой код, я обновил его, как вы здесь прокомментировали, он должен это сделать. :) @Abhishek Я пытался полностью не менять исходный код, есть много других областей, которые вы могли бы оптимизировать в коде. Но чтобы сделать ответ более понятным, я попытался воздержаться от слишком большого изменения кода по сравнению с оригиналом. Но вы совершенно правы, лично я бы использовал setInterval вместо этого. :)
@Энн, вы должны сохранить setTimeout в переменной, такой как timer = setTimeout(CheckTime, 1000);, а затем вы можете вызвать clearInterval для этой переменной, чтобы остановить таймер. clearInterval(timer);
Я не просматривал весь код, но 1)
setTimeout("CheckTime()",1000)должен бытьsetTimeout(CheckTime,1000)2) Нет элемента сquiz-time-leftid. 3) В тегахformотсутствуют закрывающие теги