CSS特效：时钟或者手表

CSS特效：时钟或者手表

style.css代码：

script.js代码：

const hour = document.querySelector('.hour');
const minute = document.querySelector('.minute');
const second = document.querySelector('.second');

const setDate = () => {
  const now = new Date();
  const getSecond = now.getSeconds();
  const getMinute = now.getMinutes();
  const getHour = now.getHours();

  const secondDegree = (getSecond / 60) * 360;
  const minuteDegree = (getMinute / 60) * 360;
  const hourDegree = (getHour / 12) * 360;

  second.style.transform = `rotate(${secondDegree}deg)`;
  minute.style.transform = `rotate(${minuteDegree}deg)`;
  hour.style.transform = `rotate(${hourDegree}deg)`;
};

setInterval(setDate, 1000);

setDate()

html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clock</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <div class="clock">
        <div class="numbers">
          <div class="twelve">12</div>
          <div class="three">3</div>
          <div class="six">6</div>
          <div class="nine">9</div>
        </div>
      </div>
      <div class="arrows">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

如果你喜欢我们的文章，欢迎您分享或收藏路人粉的文章！我们网站的目标是帮助每一个有求知欲的人，无论他们的水平和经验如何。我们相信，只要有热情和毅力，无论从什么时候开始学习都不晚。

1. 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ2766242327进行删除处理。
2. 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
★特别声明：
本站为个人博客，博客所发布的一切修改补丁、注册机、注册信息及软件和视频教程的文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关，您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。访问和下载本站内容，说明您已同意上述条款。本站为非盈利性站点，本站不贩卖软件，所有内容不作为商业行为。

THE END