HTML本身并不直接支持秒表计时器的功能,但我们可以通过JavaScript和HTML的结合来实现这个功能,以下是一个简单的示例,展示了如何使用HTML、CSS和JavaScript创建一个秒表计时器。
(图片来源网络,侵删)
1、我们需要创建HTML结构,在这个例子中,我们将使用一个<div>
元素来显示计时器的结果,以及四个<button>
元素来控制秒表的开始、暂停、重置和清零功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>秒表计时器</title> <style> /* 在这里添加CSS样式 */ </style> </head> <body> <div id="timer">00:00:00</div> <button id="start">开始</button> <button id="pause">暂停</button> <button id="reset">重置</button> <button id="clear">清零</button> <script> // 在这里添加JavaScript代码 </script> </body> </html>
2、接下来,我们需要添加一些CSS样式来美化我们的秒表计时器,在这个例子中,我们将设置计时器的背景颜色、字体颜色和大小,以及按钮的样式。
body { display: flex; justifycontent: center; alignitems: center; height: 100vh; backgroundcolor: #f0f0f0; } #timer { fontsize: 48px; color: #333; backgroundcolor: #fff; padding: 20px; borderradius: 5px; } button { display: block; margin: 10px; padding: 10px 20px; fontsize: 18px; color: #fff; backgroundcolor: #007bff; border: none; borderradius: 5px; cursor: pointer; } button:hover { backgroundcolor: #0056b3; }
3、现在,我们需要添加JavaScript代码来实现秒表计时器的功能,在这个例子中,我们将使用setInterval
函数来每秒更新计时器的显示,以及clearInterval
函数来停止计时器,我们还将添加事件监听器来处理按钮的点击事件。
let timer = document.getElementById(\'timer\');
let startButton = document.getElementById(\'start\');
let pauseButton = document.getElementById(\'pause\');
let resetButton = document.getElementById(\'reset\');
let clearButton = document.getElementById(\'clear\');
let intervalId;
let seconds = 0;
let minutes = 0;
let hours = 0;
let isRunning = false;
let isPaused = false;
function updateTimer() {
if (!isPaused) {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
} else {
seconds;
if (seconds < 0) {
seconds = 59;
minutes;
if (minutes < 0) {
minutes = 59;
hours;
}
}
}
timer.textContent = ${hours.toString().padStart(2, \'0\')}:${minutes.toString().padStart(2, \'0\')}:${seconds.toString().padStart(2, \'0\')}
;
}
startButton.addEventListener(\'click\', () => {
if (!isRunning && !isPaused) {
intervalId = setInterval(updateTimer, 1000);
isRunning = true;
startButton.textContent = \'暂停\';
} else if (isRunning && isPaused) {
isPaused = false;
startButton.textContent = \'暂停\';
} else {
startButton.textContent = \'开始\';
isRunning = true;
}
});
pauseButton.addEventListener(\'click\', () => {
if (isRunning && !isPaused) {
isPaused = true;
pauseButton.textContent = \'继续\';
clearInterval(intervalId);
} else if (isRunning && isPaused) {
isPaused = false;
pauseButton.textContent = \'暂停\';
intervalId = setInterval(updateTimer, 1000);
} else {
pauseButton.textContent = \'暂停\';
}
});
resetButton.addEventListener(\'click\', () => {
if (isRunning || isPaused) {
clearInterval(intervalId);
isRunning = false;
isPaused = false;
seconds = 0; minutes = 0; hours = 0;
timer.textContent = \'00:00:00\';
startButton.textContent = \'开始\'; pauseButton.textContent = \'暂停\'; resetButton.textContent = \'重置\'; clearButton.textContent = \'清零\';
} else {
alert(\'计时器没有运行或已暂停,无法重置!\');
}
});
本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/440172.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除