实现计时器
<!DOCTYPE html><html>
<head>
<title>实现计时器</title>
</head>
<body>
<h1>实现计时器</h1>
<p>
<span id="hour">00</span><span>:</span>
<span id="minute">00</span><span>:</span>
<span id="second">00</span>
</p>
<button id="start">开始</button>
<button id="pause">暂停</button>
<button id="stop">停止</button>
<script>
var hour = 0;
var minute = 0;
var second = 0;
var intervalId;
// 简化获取 DOM 元素操作
function getEleById(id) {
return document.getElementById(id);
}
// 补零函数，满足显示效果
function addZero(num) {
return num >= 10 ? num : '0' + num;
}
// 将时分秒设置到页面上
function setTimeOnDOM() {
getEleById('hour').innerText = addZero(hour);
getEleById('minute').innerText = addZero(minute);
getEleById('second').innerText = addZero(second);
}
getEleById('start').onclick = function () {
// 如果计时器存在，直接返回，避免重新创建计时器
if (intervalId) {
return;
}
// 开启计时器
intervalId = setInterval(function () {
// 秒数+1
second++;
// 如果到了60秒，则秒数设为0，分钟+1
if (second >= 60) {
second = 0;
minute++;
// 如果到了60分钟，则分钟设为0，小时+1
if (minute >= 60) {
minute = 0;
hour++;
}
}
// 将时间设置到页面上
setTimeOnDOM();
}, 1000);
};
getEleById('pause').onclick = function () {
// 清除计时器
clearInterval(intervalId);
intervalId = null;
};
getEleById('stop').onclick = function () {
// 停止计时器并重置时间
clearInterval(intervalId);
intervalId = null;
hour = 0;
minute = 0;
second = 0;
setTimeOnDOM();
};
</script>
</body>
</html> 上面的代码实现了一个简单的计时器。页面上有三个显示时间的元素，分别对应小时、分钟和秒钟。通过点击开始按钮可以启动计时器，计时器每秒钟自动加一，并更新到页面上显示出来。暂停按钮用于暂停计时器，停止按钮用于停止计时器并将时间重置为0。
其中，addZero函数用于将数字补零，以满足显示效果。setTimeOnDOM函数用于将当前的时分秒设置到页面上，方便显示。
另外，利用getEleById函数简化了获取DOM元素的操作。这样可以避免多次书写document.getElementById。
最后，我们通过onclick事件将开始、暂停和停止按钮与相应的函数关联起来，实现了计时器的功能。
希望对你有所帮助！如果有任何问题，请随时提问。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]