JavaScript实现简单计时器

2023年5月27日下午12:59 • JavaScript

当需要实现一个简单的计时器时，我们可以使用JavaScript来实现。下面是实现一个简单计时器的步骤和代码示例：

步骤一：创建HTML文件

首先，我们需要创建一个HTML文件，其中包含一个计时器及其按钮。代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript计时器示例</title>
    <meta charset="utf-8">
</head>
<body>
    <div>
        <!--显示计时器-->
        <h3 id="timer">00:00:00</h3>
        <!--开始按钮-->
        <button id="startBtn" onclick="startTimer()">开始</button>
        <!--暂停按钮-->
        <button id="pauseBtn" onclick="pauseTimer()">暂停</button>
        <!--重置按钮-->
        <button id="resetBtn" onclick="resetTimer()">重置</button>
    </div>
</body>
</html>

我们可以看到，这里添加了一个显示计时器的div元素，里面包含一个用于显示计时器的h3标签和三个按钮，分别是开始、暂停和重置按钮。

步骤二：定义JavaScript函数来控制计时器

接下来，我们需要在JavaScript中定义三个函数来控制计时器的运行：

startTimer()函数

startTimer()函数将启动计时器并将开始按钮设置为不可用，如下示例代码：

// 定义一个计时器变量
var timerCount = 0;

// 定义计时器
function startTimer(){
    // 每隔1秒钟调用tick()函数
    timer = setInterval(function() {tick();}, 1000);
    // 禁用开始按钮
    document.getElementById('startBtn').disabled = true;
}

这里设置了一个timerCount变量，并创建了一个startTimer()函数，将计时器设置为每秒钟调用一次tick()函数，并禁用开始按钮。每次调用tick()函数时，timerCount变量将增加1并计算出当前的时间，然后将其显示在h3元素中。

tick()函数

tick()函数用于更新计时器的显示时间，在每次调用startTimer()函数时都会被调用。如下所示：

function tick() {
    // 增加计时器值
    timerCount ++;
    // 计算时间并显示
    var hours = Math.floor(timerCount / 3600);
    var minutes = Math.floor((timerCount - hours * 3600) / 60);
    var seconds = timerCount - (hours * 3600) - (minutes * 60);
    var time = (hours < 10 ? "0" : "") + hours + ":" + (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
    document.getElementById("timer").innerHTML = time;
}

该函数会增加计时器变量的值，然后使用Math.floor()函数来计算出时、分和秒，并将这些值格式化为“00:00:00”的形式并显示在h3元素中。

pauseTimer()和resetTimer()函数

pauseTimer()函数用于暂停计时器，如下所示：

function pauseTimer() {
    clearInterval(timer);
    // 启用开始按钮
    document.getElementById('startBtn').disabled = false;
}

该函数会清除计时器变量，并将开始按钮设置为可用状态。

resetTimer()函数用于重置计时器，如下所示：

function resetTimer() {
    clearInterval(timer);
    timerCount = 0;
    document.getElementById("timer").innerHTML = "00:00:00";
    // 启用开始按钮
    document.getElementById("startBtn").disabled = false;
}

该函数会清除计时器变量，将计时器变量值重置为0，并将显示时间设置为“00:00:00”。

步骤三：测试

现在，我们已经定义了所有必要的函数，可以在我们的HTML文件上进行测试了。只需要在浏览器中访问HTML文件并单击“开始”按钮，即可开始计时器。如果需要暂停或重置计时器，则可以单击相应的按钮。

下面是两个计时器示例：

示例1: 倒计时器

如果您想实现倒计时器，则可以在tick()函数中添加一些额外的代码，用于给出时间到期的提示。例如：

function tick() {
    timerCount--;
    if (timerCount <= 0) {
        // 时间到了
        alert("时间到了！");
        clearInterval(timer);
        document.getElementById('startBtn').disabled = false;
        document.getElementById("timer").innerHTML = "00:00:00";
        return;
    }
    var hours = Math.floor(timerCount / 3600);
    var minutes = Math.floor((timerCount - hours * 3600) / 60);
    var seconds = timerCount - (hours * 3600) - (minutes * 60);
    var time = (hours < 10 ? "0" : "") + hours + ":" + (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
    document.getElementById("timer").innerHTML = time;
}

示例2: 带有按键反应的计时器

有时，我们需要在计时器中添加对按键的响应。例如，我们可以在HTML文件中添加以下代码：

<body onkeydown="detectKeypress(event)">

然后，我们可以在JavaScript文件中定义一个名为detectKeypress()的函数：

function detectKeypress(e) {
    var keyID = (window.event) ? event.keyCode : e.keyCode;
    if (keyID === 32) {
        if (timerOn) {
            pauseTimer();
        } else {
            startTimer();
        }       
    }
}

该函数使用keydown事件来侦听用户按下空格键，并在按下时启动或停止计时器。如果计时器已经在运行，则调用pauseTimer()函数来暂停计时器。否则则调用startTimer()函数来启动计时器。