看这里。我想做一个简单的测验。开始测试将执行一个函数，该函数运行一个问题数组并启动一个计时器。当前和总计数将是可见的。计时器从10开始倒数。一旦它达到0，数组中的下一项将运行。
我创建了一个较早的代码(这里没有显示)，它工作得很好，但是当我试图添加一个循环问题特性(在重复倒计时的同时保持数组计数)时，我破坏了它。我试着重新创建代码，但现在它不会工作后的第一个项目:
任何想法?
Question: <div id="interview_questions"></div>
Timer: <div id="countdown"></div>
Current count question: <div id="questions_count"></div>
Total count questions: <div id="questions_total"></div>
<button onclick="start_interview()">start interview</button>
<script>
// Questions
var questions = ["Why do you want to work here?",
"Why are you a good fit?",
"What are your strengths?"
];
// Givens
let questions_total = questions.length;
let questions_count = 0;
function start_interview() {
document.getElementById("questions_total").innerHTML = questions_total;
let question_count = 1;
for (let questions_count = 0; questions_count < questions_total; questions_count++) {
// Show questions
timer();
console.log(questions[questions_count]);
//questions_count++;
// console.log(questions_count);
}
}
// Timer
function timer() {
let timer = 10;
if (timer > 0) {
let question_timer = setInterval(function() {
if (timer === 0) {
clearInterval(question_timer);
}
document.getElementById("interview_questions").innerHTML = questions[questions_count];
document.getElementById("questions_count").innerHTML = questions_count;
document.getElementById("countdown").innerHTML = timer;
timer--;
console.log(timer);
console.log(questions_count);
}, 1000);
} else {
questions_count++;
start_interview();
}
}
</script>
编辑2:OK SOLVED -基本上，不确定你是否看到我之前说的，但我拼凑了一个快速的解决方案，做你想做的，问任何问题，我会在早上回答他们
<html>
<head>
Question: <div id="interview_questions"></div>
Timer: <div id="countdown"></div>
Current count question: <div id="questions_count"></div>
Total count questions: <div id="questions_total"></div>
<button onclick="start_interview()">start interview</button>
<script>
// Questions
var questions = ["Why do you want to work here?",
"Why are you a good fit?",
"What are your strengths?"
];
// Givens
let questions_total = questions.length;
let currentQuestionNumber = 0;
function endInterview() {
console.log('Interview Completed (nothing else has been added to the "endInterview" function) nNOTE: the timer is 5 seconds however that is because i added a parameter so you can set the timer timer when you call the timer() function, see for yourself')
}
function start_interview() {
document.getElementById("questions_total").innerHTML = questions_total;
toQuestion(0);
timer(5);
}
function toQuestion(questionNum) {
// this may not fit your exact problem but when you want to expand maybe you use this func?
if ( questionNum < questions.length || questionNum < 0 ) {
currentQuestionNumber = questionNum;
document.getElementById("interview_questions").innerHTML = questions[currentQuestionNumber];
document.getElementById("questions_count").innerHTML = currentQuestionNumber;
} else {
console.error("Out of bounds!");
}
}
// Timer
function timer(timerLength) {
let timer = timerLength
if (timer > 0) {
let question_timer = setInterval(function() {
if (timer === 0) {
if (currentQuestionNumber < questions.length-1) {
timer = timerLength;
toQuestion( ++currentQuestionNumber ); //moves to next question (note that the ++ has to go before the variable)
} else {
clearInterval(question_timer);
endInterview();
}
}
document.getElementById("countdown").innerHTML = timer;
timer--;
}, 1000);
} else {
console.error("to little")
}
}
</script>
</head>
</html>