Javascript 实现网页时钟

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>网页时钟</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .clock {
      width: 600px;
      height: 600px;
      background: url(https://img.51xcode.com/imgs/2023/04/517b7e0827256747.jpg);
      margin: 50px auto 0;
      position: relative;
    }

    .hh,
    .mm,
    .ss {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: url(https://img.51xcode.com/imgs/2023/04/b6ed2435c70d0279.png) no-repeat center;
    }

    .mm {
      background-image: url(https://img.51xcode.com/imgs/2023/04/e0e3a9038a1d87e7.png);
      transform: rotate(270deg);
    }

    .ss {
      background-image: url(https://img.51xcode.com/imgs/2023/04/67f9b438f5f0eefa.png);
      transform: rotate(0deg);
    }
  </style>
</head>

<body>
  <div class="clock">
    <div class="hh" id="h"></div>
    <div class="mm" id="m"></div>
    <div class="ss" id="s"></div>
  </div>
  <script>
    /*
      知识点：
        1. 创建日期对象 获取当前时间
        2. 多次定时器，重复获取时间，让指针动起来
    */

    // 查找页面的元素，定时器调用的函数外面，查找一次即可
    const second = document.querySelector('.ss');
    // 封装时钟效果，定时器定时调用的函数
    // 通过定时器每隔一秒钟再调用一次。
    let du = 0
    setInterval(function () {
      du += 6
      if (du >= 360) {
        du = 0
      }
      second.style.transform = `rotate(${du}deg)`;
    }, 1000);
  </script>
</body>

</html>

免责声明：

1.本站所提供的全部内容仅限于交流、学习与研究使用，请勿用于非法目的。

2.任何使用本站内容而出现的意外或损失，本站概不负责。

3.本站遵守国家法律法规，禁止制作、复制、发布、传播任何具有反动、色情、暴力、淫秽，政治等内容的信息，一经发现，立即删除，并锁定IP地址移交给公安机关处理。

4.本站的留言、评论与转载内容，仅代表原作者个人观点，与本站观点或立场无关，所有评论、留言均需经过审核后方可正常显示，本站有权删除和过滤违反法律法规的或不正当的言论。

5.本站的文章部分内容可能来源于网络或转载于其他文章，仅供大家学习与参考，如有侵权，请联系站长QQ:1823782755进行删除处理。

6.本站可能会包含第三方网站的链接，点击后或将离开本站并进入其他站点，本站不对其他站点的内容负责。

7.本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。

8.根据《计算机软件保护条例》第十七条，为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬，本站所有软件资料仅用于学习研究。

9.本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。

10.本站文章采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可，阅读后请勿用于非法用途。

点我去本站旗下导航网

更多知识，请关注微信公众号“51学代码”

文章版权声明 1.本网站名称：51学代码
2.本站永久网址：https://www.51xcode.com
3.本站的部分内容可能来源于网络或转载引用于其他文章，仅供大家学习与参考，如有侵权，请联系站长QQ:1823782755进行删除处理。
4.本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5.本站一律禁止以任何方式发布或转载任何违法的相关信息，一经发现，立即删除，并锁定IP地址移交给公安机关处理，访客发现请向站长举报。
6.如需转载文章请标明来源:51学代码 www.51xcode.com

THE END