在掌握了JavaScript的基础知识后,制作一个简单的秒表计时器是一个很好的实践项目。通过这个项目,你不仅可以巩固你的编程技能,还能了解如何使用JavaScript操作DOM(文档对象模型)以及如何处理时间。下面,我将一步步带你完成这个有趣的项目。
准备工作
在开始之前,确保你已经安装了Node.js和npm(Node.js包管理器)。这将帮助你创建一个简单的本地开发环境。
- 打开终端或命令提示符。
- 输入
npm init -y来创建一个新的npm项目。 - 输入
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和事件监听器。继续实践,你将能够制作出更多有趣的项目!
