实现电子时钟效果，要求每隔一秒获取一次当前时间，并提供一个按钮控制电子时钟是否停止

S_戒酒大师

于 2023-12-22 09:50:01 发布

阅读量2.2k

点赞数 9

文章标签：前端 javascript 服务器

本文链接：https://blog.youkuaiyun.com/weixin_45730641/article/details/135146015

版权

<!DOCTYPE html>
<html>
  <head>
    <title>电子时钟</title>
  </head>
  <body>
    <h1 id="clock"></h1>
    <button onclick="toggleClock()">停止/启动</button>

    <script>
      var clockInterval;

      function startClock() {
        clockInterval = setInterval(updateClock, 1000);
      }

      function stopClock() {
        clearInterval(clockInterval);
      }

      function updateClock() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        var timeString =
          hours.toString().padStart(2, "0") +
          ":" +
          minutes.toString().padStart(2, "0") +
          ":" +
          seconds.toString().padStart(2, "0");

        document.getElementById("clock").textContent = timeString;
      }

      function toggleClock() {
        if (clockInterval) {
          stopClock();
        } else {
          startClock();
        }
      }

      startClock();
    </script>
  </body>
</html>