正文

学会JS让秒表动起来：简单步骤教你制作秒表计时器

/0 浏览量
0530

在掌握了JavaScript的基础知识后，制作一个简单的秒表计时器是一个很好的实践项目。通过这个项目，你不仅可以巩固你的编程技能，还能了解如何使用JavaScript操作DOM（文档对象模型）以及如何处理时间。下面，我将一步步带你完成这个有趣的项目。

准备工作

在开始之前，确保你已经安装了Node.js和npm（Node.js包管理器）。这将帮助你创建一个简单的本地开发环境。

  1. 打开终端或命令提示符。
  2. 输入 npm init -y 来创建一个新的npm项目。
  3. 输入 npm install express 来安装Express框架，这将帮助我们创建一个简单的服务器。

创建HTML文件

首先，我们需要一个HTML文件来作为我们的用户界面。创建一个名为 index.html 的文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒表计时器</title>
</head>
<body>
    <h1>秒表计时器</h1>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <button id="reset">重置</button>
    <div id="display">00:00:00</div>

    <script src="app.js"></script>
</body>
</html>

这段代码创建了一个简单的HTML页面，包含三个按钮用于控制秒表，以及一个用于显示计时器的容器。

创建CSS文件

为了使秒表看起来更美观，我们可以添加一些CSS样式。创建一个名为 styles.css 的文件，并添加以下内容：

body {
    font-family: Arial, sans-serif;
    text-align: center;
}

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

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

将这个CSS文件链接到你的HTML文件中：

<link rel="stylesheet" href="styles.css">

创建JavaScript文件

现在，我们来编写JavaScript代码。创建一个名为 app.js 的文件，并添加以下内容：

let startTime = 0;
let elapsedTime = 0;
let timerInterval = null;

document.getElementById('start').addEventListener('click', function() {
    if (timerInterval === null) {
        startTime = new Date().getTime() - elapsedTime;
        timerInterval = setInterval(updateTimer, 1000);
    }
});

document.getElementById('stop').addEventListener('click', function() {
    if (timerInterval !== null) {
        clearInterval(timerInterval);
        elapsedTime = new Date().getTime() - startTime;
        timerInterval = null;
    }
});

document.getElementById('reset').addEventListener('click', function() {
    if (timerInterval !== null) {
        clearInterval(timerInterval);
        startTime = 0;
        elapsedTime = 0;
        timerInterval = null;
    }
    document.getElementById('display').innerText = '00:00:00';
});

function updateTimer() {
    elapsedTime = new Date().getTime() - startTime;
    const hours = Math.floor((elapsedTime / 3600000) % 60);
    const minutes = Math.floor((elapsedTime / 60000) % 60);
    const seconds = Math.floor((elapsedTime / 1000) % 60);
    document.getElementById('display').innerText = 
        (hours < 10 ? '0' : '') + hours + ':' +
        (minutes < 10 ? '0' : '') + minutes + ':' +
        (seconds < 10 ? '0' : '') + seconds;
}

这段代码实现了秒表的基本功能。我们使用了 setInterval 函数来每隔一秒更新计时器，并使用 clearInterval 来停止计时器。我们还添加了重置功能，将计时器重置为初始状态。

运行你的秒表计时器

现在，你已经完成了秒表计时器的所有部分。在终端中，运行以下命令来启动你的服务器：

node server.js

确保你的HTML文件位于项目的根目录中。在浏览器中打开 http://localhost:3000，你应该能看到你的秒表计时器！

通过这个项目，你不仅学会了如何使用JavaScript创建一个简单的计时器，还了解了如何操作DOM和事件监听器。继续实践，你将能够制作出更多有趣的项目！

-- 展开阅读全文 --