正文

轻松掌握JS秒表制作：简单步骤，实现实时计时功能

/0 浏览量
0327

引言

秒表是一种常用的计时工具，尤其在运动、实验和日常生活中。使用JavaScript（JS）制作一个秒表不仅能够增强网页的互动性，还能提高用户体验。本文将向您展示如何通过简单的步骤制作一个实时计时的秒表。

准备工作

在开始之前，请确保您已经安装了JavaScript环境，并且对HTML和CSS有一定的了解。以下是一个简单的HTML文件结构，用于展示秒表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS秒表制作</title>
    <style>
        /* 在这里添加CSS样式 */
    </style>
</head>
<body>
    <div id="stopwatch">
        <div id="display">00:00:00</div>
        <button id="start">开始</button>
        <button id="stop">停止</button>
        <button id="reset">重置</button>
    </div>

    <script>
        // 在这里添加JavaScript代码
    </script>
</body>
</html>

步骤一：设计秒表界面

首先，我们需要设计秒表的界面。在上面的HTML代码中，我们有一个包含显示时间和三个按钮的div元素。这些按钮分别是“开始”、“停止”和“重置”。

步骤二：编写JavaScript代码

接下来，我们将编写JavaScript代码来实现秒表的计时功能。

// 获取秒表显示元素和按钮
const display = document.getElementById('display');
const startBtn = document.getElementById('start');
const stopBtn = document.getElementById('stop');
const resetBtn = document.getElementById('reset');

let startTime, endTime, elapsed, timer;

// 开始计时
startBtn.addEventListener('click', function() {
    if (!startTime) {
        startTime = new Date().getTime();
        timer = setInterval(updateTime, 1000);
    }
});

// 更新时间显示
function updateTime() {
    endTime = new Date().getTime();
    elapsed = endTime - startTime;
    const hours = Math.floor((elapsed % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((elapsed % (1000 * 60)) / 1000);
    display.textContent = 
        (hours < 10 ? '0' : '') + hours + ':' +
        (minutes < 10 ? '0' : '') + minutes + ':' +
        (seconds < 10 ? '0' : '') + seconds;
}

// 停止计时
stopBtn.addEventListener('click', function() {
    clearInterval(timer);
    startTime = null;
});

// 重置计时
resetBtn.addEventListener('click', function() {
    clearInterval(timer);
    startTime = null;
    display.textContent = '00:00:00';
});

步骤三：添加CSS样式

最后，我们可以添加一些CSS样式来美化秒表界面。以下是一个简单的CSS样式示例：

#stopwatch {
    text-align: center;
    margin-top: 50px;
}

#display {
    font-size: 24px;
    margin-bottom: 10px;
}

button {
    margin: 0 5px;
    padding: 5px 10px;
    font-size: 16px;
}

总结

通过以上步骤，您已经成功制作了一个简单的JS秒表。这个秒表可以实时显示时间，并且可以通过“开始”、“停止”和“重置”按钮来控制计时。您可以根据自己的需求进一步扩展和改进这个秒表，例如添加计时单位（毫秒）、保存最佳时间记录等功能。

-- 展开阅读全文 --