实现计时器

吃个橘子~ · 发表于 2023-12-16 14:44:35

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!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>

FishC · 发表于 2023-12-16 14:44:54

上面的代码实现了一个简单的计时器。页面上有三个显示时间的元素，分别对应小时、分钟和秒钟。通过点击开始按钮可以启动计时器，计时器每秒钟自动加一，并更新到页面上显示出来。暂停按钮用于暂停计时器，停止按钮用于停止计时器并将时间重置为0。

其中，addZero函数用于将数字补零，以满足显示效果。setTimeOnDOM函数用于将当前的时分秒设置到页面上，方便显示。

另外，利用getEleById函数简化了获取DOM元素的操作。这样可以避免多次书写document.getElementById。

最后，我们通过onclick事件将开始、暂停和停止按钮与相应的函数关联起来，实现了计时器的功能。

希望对你有所帮助！如果有任何问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 实现计时器

马上注册，结交更多好友，享用更多功能^_^