【前端动效】js动态时钟效果

最新推荐文章于 2025-02-11 10:41:09 发布

借来一夜星光

最新推荐文章于 2025-02-11 10:41:09 发布

阅读量1k

点赞数 21

分类专栏：前端动效文章标签：前端 css3 html5 javascript

本文链接：https://blog.csdn.net/qq_58195504/article/details/145082501

版权

前端动效专栏收录该内容

7 篇文章

订阅专栏

1. 效果图

下图展示了一个带有背景图片（表盘）的时钟，并在表盘上动态显示时针、分针和秒针。这些指针会根据当前的时间每秒更新一次，模拟真实时钟的行为。

2. 思路分析

2.1 目标

要实现一个带表盘、时针、分针、秒针位置的正确布局，且模拟真实时钟的行为。

2.2 关键点

(1) 要确保时针、分针和秒针能够根据当前时间准确地旋转到正确的位置

(2) 特别需要注意的是时针不仅受小时影响，还受分钟影响（即每分钟时针也会微小移动）

3. 代码实现

接下来我会一步一步解说每段关键代码的含义。

3.1 html部分

 <div class="box">
       <div class="bell">
           <img src="./images/hour.png" alt="" class="hourl">
           <img src="./images/minute.png" alt="" class="minl">
           <img src="./images/second.png" alt="" class="secondl">
       </div>
    </div>

.box是最外层盒子，.bell是表创建一个包含时钟表盘和指针的容器，里面的三张图片分别对应时、分、秒。

3.2 css部分

 *{margin: 0;padding: 0;}
        .box{
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .bell{
            width: 600px;
            height: 600px;
            background: url('./images/clock.jpg');
            position: relative;
        }
        .bell>img{
            position: absolute;
            left: 50%;
            margin-left: -15px;
        }

(1) 给最外层盒子 .box 设置弹性布局，主轴及交叉轴居中，使时钟在页面居中显示。

(2) 给 .bell 设置相对定位，方便时、分、秒图片排列。

(3) 调整时、分、秒图片的位置，使之在表盘居中排列。

3.3 js代码

  // 获取元素
  var hourl = document.querySelector('.hourl');
  var minl = document.querySelector('.minl');
  var secondl = document.querySelector('.secondl');

获取时、分、秒图片Dom元素。

setInterval(function(){
  // 获取时分秒
  var time = new Date();
  var hour = time.getHours() % 12;  // 6
  var min = time.getMinutes();
  var second = time.getSeconds();

 // 计算角度
 var hourDeg = (hour * 30) + (min * 0.5);  
 var minDeg = min * 6; 
 var secondDeg = second * 6;   // 秒针每秒6°

 secondl.style.transform='rotate'+'('+secondDeg+'deg'+')';
 minl.style.transform='rotate'+'('+minDeg+'deg'+')';
 hourl.style.transform='rotate'+'('+hourDeg+'deg'+')';

},1000);

注意：

(1) 每小时30° 分针对时针也有影响，分针每走一分钟，时针移动0.5

(2) 分针每分钟走6°

(3) 秒针每秒6°

知道了时、分、秒的旋转度数之后，将定时器的时间间隔设置为 1000 毫秒（即 1 秒），以匹配秒针的更新频率。在每次更新时，修改指针的 transform 属性即可。

3.4 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .bell{
            width: 600px;
            height: 600px;
            background: url('./images/clock.jpg');
            position: relative;
        }
        .bell>img{
            position: absolute;
            left: 50%;
            margin-left: -15px;
        }
    </style>
</head>
<body>
    <div class="box">
       <div class="bell">
           <img src="./images/hour.png" alt="" class="hourl">
           <img src="./images/minute.png" alt="" class="minl">
           <img src="./images/second.png" alt="" class="secondl">
       </div>
    </div>

    <script>
        // 获取元素
        var hourl = document.querySelector('.hourl');
        var minl = document.querySelector('.minl');
        var secondl = document.querySelector('.secondl');



        setInterval(function(){
             // 获取时分秒
            var time = new Date();
            var hour = time.getHours() % 12;  
            var min = time.getMinutes();
            var second = time.getSeconds();

            // 计算角度
            var hourDeg = (hour * 30) + (min * 0.5);  
            var minDeg = min * 6;  
            var secondDeg = second * 6;   

            secondl.style.transform='rotate'+'('+secondDeg+'deg'+')';
            minl.style.transform='rotate'+'('+minDeg+'deg'+')';
            hourl.style.transform='rotate'+'('+hourDeg+'deg'+')';

            console.log(hour + ' ' + min + ' ' + second);
        },1000);
    </script>
</body>
</html>