构建计时器计数器是理解 HTML、CSS 和 JavaScript 之间交互的好方法。这篇文章将指导您完成创建一个简单计时器的过程，该计时器在用户单击按钮时开始计数。计时器将以小时、分钟和秒显示经过的时间。
第 1 步：HTML 结构
首先创建基本的 HTML 结构。您需要一个 div 来显示计时器和一个按钮来启动计时器。这是一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer Counter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Timer Counter</h1>
<div id="timer">00:00:00</div>
<button id="startButton">Start Timer</button>
</div>
<script src="script.js"></script>
</body>
</html>
在此 HTML 文件中：
id=“timer”的div用于显示计时器。
id=“start Button”的按钮用于启动计时器。
第 2 步：CSS 样式
接下来，设置 HTML 元素的样式以创建具有视觉吸引力的界面。随意设计您喜欢的风格。
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
#timer {
font-size: 3rem;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
}
此 CSS 文件：
将内容垂直和水平居中。
使用大字体设置计时器显示样式。
为按钮添加填充和样式，使其更易于点击。
第 3 步：JavaScript 逻辑
最后，添加 JavaScript 来处理计时器功能。这包括启动计时器、每秒更新一次以及显示经过的时间。
// script.js
document.addEventListener("DOMContentLoaded", () => {
const startButton = document.getElementById("startButton");
const timerDisplay = document.getElementById("timer");
let timerInterval;
let startTime;
function startTimer() {
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
}
function updateTimer() {
const currentTime = new Date();
const elapsedTime = new Date(currentTime - startTime);
const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');
timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
}
startButton.addEventListener("click", startTimer);
});
这个 JavaScript 文件：
等待 DOM 加载后再执行。
定义startTimer函数来初始化开始时间并设置
每秒更新计时器的时间间隔。
定义updateTimer函数，用于计算经过的时间，格式
它，并更新计时器显示。
向按钮添加事件监听器，以便在单击时启动计时器。
奖励：
隐藏开始按钮并显示停止按钮脚本
// script.js
document.addEventListener("DOMContentLoaded", () => {
const startButton = document.getElementById("startButton");
const stopButton = document.getElementById("stopButton");
const timerDisplay = document.getElementById("timer");
let timerInterval;
let startTime;
function startTimer() {
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
startButton.style.display = "none";
stopButton.style.display = "inline-block";
}
function stopTimer() {
clearInterval(timerInterval);
startButton.style.display = "inline-block";
stopButton.style.display = "none";
}
function updateTimer() {
const currentTime = new Date();
const elapsedTime = new Date(currentTime - startTime);
const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');
timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
}
startButton.addEventListener("click", startTimer);
stopButton.addEventListener("click", stopTimer);
});
以上是如何使用 Html、Css 和 Javascript 创建计时器计数器。的详细内容。更多信息请关注PHP中文网其他相关文章！
