将倒数计时器添加到 Javascript 测验 - Javascript

在 Javascript 中，我们可以使用倒数计时器来执行某些操作，例如定时器，同时也可以用于测验应用程序中。在此文档中，我们将学习如何使用 Javascript 来创建倒数计时器，并将其添加到测验程序中。

创建倒数计时器

要创建倒数计时器，我们需要使用 JavaScript 的 setInterval() 函数。该函数会重复执行一个函数或一段代码，每隔一定时间就会执行一次。

以下是一个创建倒数计时器的示例代码：

// 设置一个倒计时器，每秒调用一次 countDown() 函数
var countdownInterval = setInterval(countDown, 1000);

// 倒计时总长（秒）
var totalSeconds = 60;

// 倒数时间
function countDown() {
    totalSeconds--;

    // 倒计时结束
    if (totalSeconds <= 0) {
        clearInterval(countdownInterval);
        console.log('Time is up!');
        return;
    }

    // 计算时间
    var minutes = Math.floor(totalSeconds / 60);
    var seconds = Math.floor(totalSeconds % 60);

    // 将计算结果格式化并输出
    console.log(minutes + ":" + (seconds < 10 ? "0" : "") + seconds);
}

上述代码中，我们使用了 setInterval() 函数来创建了一个每秒调用一次 countDown() 函数的计时器。每秒钟都会将 totalSeconds 减 1，直到倒计时结束。

将倒数计时器添加到测验程序中

现在，我们已经知道如何创建倒数计时器了，那么我们如何将其添加到测验程序中呢？

一个典型的测验程序需要遵循以下步骤：

1. 准备考题
2. 开始倒计时
3. 用户回答考题
4. 检查用户答案
5. 显示得分

下面是一个基于上述步骤的示例代码：

// 准备考题
var questions = [
    {
        question: "What is the capital of France?",
        answer: "Paris"
    },
    {
        question: "What is the largest planet in the solar system?",
        answer: "Jupiter"
    },
    {
        question: "What is the smallest country in the world?",
        answer: "Vatican City"
    }
];

// 设置倒计时器
var countdownInterval = setInterval(countDown, 1000);
var totalSeconds = 60;

// 开始倒计时
function countDown() {
    totalSeconds--;
    if (totalSeconds <= 0) {
        clearInterval(countdownInterval);
        endQuiz();
    }

    var minutes = Math.floor(totalSeconds / 60);
    var seconds = Math.floor(totalSeconds % 60);

    var timerEl = document.getElementById('timer');
    timerEl.textContent = minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
}

// 显示考题
function showQuestion(questionIndex) {
    var quizBodyEl = document.getElementById('quiz-body');

    quizBodyEl.innerHTML = '';

    var questionEl = document.createElement('h1');
    questionEl.textContent = questions[questionIndex].question;

    var answerInputEl = document.createElement('input');
    answerInputEl.setAttribute('type', 'text');
    answerInputEl.setAttribute('id', 'answer-input');

    var submitButtonEl = document.createElement('button');
    submitButtonEl.textContent = 'Submit Answer';
    submitButtonEl.setAttribute('onclick', 'checkAnswer(' + questionIndex + ')');

    quizBodyEl.appendChild(questionEl);
    quizBodyEl.appendChild(answerInputEl);
    quizBodyEl.appendChild(submitButtonEl);

    answerInputEl.focus();
}

// 检查答案
function checkAnswer(questionIndex) {
    var answerInputEl = document.getElementById('answer-input');
    var userAnswer = answerInputEl.value.trim();

    if (userAnswer === questions[questionIndex].answer) {
        alert('You are correct!');
    } else {
        alert('You are wrong!');
    }

    answerInputEl.value = '';
}

// 开始测验
function startQuiz() {
    showQuestion(0);
}

// 结束测验
function endQuiz() {
    var quizBodyEl = document.getElementById('quiz-body');

    quizBodyEl.innerHTML = '';

    var scoreEl = document.createElement('h1');
    scoreEl.textContent = 'Your score is 0/3';

    quizBodyEl.appendChild(scoreEl);
}

// 页面加载完成后开始测验
document.addEventListener('DOMContentLoaded', function () {
    startQuiz();
});

上述代码中，我们使用了 setInterval() 函数来创建了一个每秒调用一次 countDown() 函数的计时器。通过在页面加载完成后调用 startQuiz() 函数来开始测验。

在 startQuiz() 函数中，我们通过调用 showQuestion() 函数来显示考题，并为用户提供了一个输入框和一个提交按钮。当用户点击提交按钮时，我们将调用 checkAnswer() 函数来检查用户的答案是否正确。

在测验结束时，我们将调用 endQuiz() 函数来显示得分并结束测验。

结论

倒数计时器是一个非常有用的工具，可以用于许多不同的用途。在 Javascript 中，我们可以通过 setInterval() 函数来创建倒数计时器，并将其与测验程序结合使用，从而更好地管理考试时间。