正文

轻松学会用JS制作秒表：入门级教程，实现计时功能，助你掌握前端技能

/0 浏览量
0514

引言

秒表，这个看似简单的工具，在日常生活和运动训练中扮演着重要的角色。而在前端开发领域，通过用JavaScript（JS）制作一个秒表，不仅可以提升你的编程技能，还能让你更好地理解JavaScript的工作原理。本文将带你从零开始，轻松学会用JS制作一个具有计时功能的秒表。

准备工作

在开始制作秒表之前，你需要做好以下准备工作：

  1. 熟悉HTML、CSS和JavaScript基础：这些是制作秒表的基础，如果还不熟悉，请先学习相关内容。
  2. 安装浏览器开发者工具：大多数现代浏览器都内置了开发者工具，可以用来调试和测试你的代码。
  3. 了解DOM操作：在制作秒表时，我们需要操作DOM元素，因此了解DOM操作是必要的。

制作秒表

下面我们将一步步制作一个简单的秒表。

1. 创建HTML结构

首先，我们需要创建秒表的HTML结构。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒表</title>
    <link rel="stylesheet" href="styles.css">
</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 src="script.js"></script>
</body>
</html>

2. 添加CSS样式

接下来，我们需要为秒表添加一些CSS样式，使其看起来更美观。以下是一个简单的示例：

#stopwatch {
    width: 300px;
    margin: 50px auto;
    text-align: center;
}

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

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

3. 编写JavaScript代码

最后，我们需要编写JavaScript代码来实现秒表的计时功能。以下是一个简单的示例：

const display = document.getElementById('display');
const startBtn = document.getElementById('start');
const stopBtn = document.getElementById('stop');
const resetBtn = document.getElementById('reset');

let startTime = 0;
let elapsedTime = 0;
let timerId = null;

startBtn.addEventListener('click', () => {
    startTime = Date.now() - elapsedTime;
    timerId = setInterval(() => {
        elapsedTime = Date.now() - startTime;
        updateDisplay(elapsedTime);
    }, 1000);
});

stopBtn.addEventListener('click', () => {
    clearInterval(timerId);
});

resetBtn.addEventListener('click', () => {
    clearInterval(timerId);
    elapsedTime = 0;
    updateDisplay(elapsedTime);
});

function updateDisplay(time) {
    const hours = Math.floor(time / 3600000);
    const minutes = Math.floor((time % 3600000) / 60000);
    const seconds = Math.floor((time % 60000) / 1000);
    const formattedTime = 
        (hours < 10 ? '0' : '') + hours + ':' +
        (minutes < 10 ? '0' : '') + minutes + ':' +
        (seconds < 10 ? '0' : '') + seconds;
    display.textContent = formattedTime;
}

总结

通过以上步骤，我们成功地制作了一个具有计时功能的秒表。在这个过程中，我们学习了如何使用HTML、CSS和JavaScript来构建一个简单的网页应用，并了解了DOM操作和JavaScript计时器的基本用法。

希望这篇文章能帮助你轻松学会用JS制作秒表，并在前端开发的道路上越走越远。如果你在制作过程中遇到任何问题，欢迎在评论区留言交流。

-- 展开阅读全文 --