用JS实现一个时钟的效果

（效果图）

分两步进行的。

第一步：要得到现在的时分秒

但是这里面有一个小玄机。

比如现在是 9点整时针指向 9 是没错的

但是如果现在是 9点半时针应该指向的是 9到10 之间才对

所以，我们不但要得到现在的小时，还要得到已经过去了多少分

ms = date.getMilliseconds(); // 现在的毫秒数
s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s
m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟
h = date.getHours() % 12 + m / 60 ;

第二步：旋转角度原理

秒针一圈 360 ° 一共有 60 秒每秒 6 °

分针一圈 360 一圈走 60次每次 6° 每分钟 6°

时针一圈 360 一共 12 个表盘没有24小时每个小时走 30°

完整代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin:50px auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }
        .clock div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            
        }
        .h {
            background: url(images/hour.png) no-repeat center center;
        }
        .m {
            background: url(images/minute.png) no-repeat center center;
        }
        .s {
            background: url(images/second.png) no-repeat center center;
        }

    </style>
</head>
<body>
<div class="clock">
    <div class="h" id="hour"></div>
    <div class="m" id="minute"></div>
    <div class="s" id="second"></div>
</div>
</body>
</html>

<script>
  var hour = document.getElementById("hour");
  var minute = document.getElementById("minute");
  var second = document.getElementById("second");
    // 开始定时器
   var s = 0,m = 0, h = 0, ms = 0;
    setInterval(function() {
          // 内容就可以了
        var date = new Date();  // 得到最新的时间
        ms = date.getMilliseconds(); // 现在的毫秒数
        s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s
        m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟
        h = date.getHours() % 12 + m / 60 ;
        //console.log(h);
        //旋转角度
       // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
        second.style.WebkitTransform = "rotate("+ s*6 +"deg)";
                     //  变化            旋转    deg  度
        minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";
        hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";
        second.style.MozTransform = "rotate("+ s*6 +"deg)";
                     //  变化            旋转    deg  度
        minute.style.MozTransform = "rotate("+ m*6 +"deg)";
        hour.style.MozTransform = "rotate("+ h*30 +"deg)";
    },100);
</script>

附上需要的图片

用JS实现一个时钟的效果

猜你喜欢