jQ实现机械表

最新推荐文章于 2025-09-02 11:38:08 发布

原创最新推荐文章于 2025-09-02 11:38:08 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍如何使用HTML5、CSS3及JavaScript实现一个动态时钟。通过设置时钟样式和利用JavaScript定时更新指针位置，使时钟能准确显示当前时间。适合前端初学者实践。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 100px auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }

        .clock div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/hour.png) no-repeat center center;
        }

        #m {
            background-image: url(images/minute.png);
        }

        #s {
            background-image: url(images/second.png);
        }
    </style>
</head>
<body>
<div class="clock">
    <div id="h"></div>
    <div id="m"></div>
    <div id="s"></div>
</div>
<script src="common.js"></script>
<script>
    //1.获取元素
    var hourDiv = id("h");
    var minDiv = id("m");
    var secDiv = id("s");
   //2.因为一出来就要显示当前的时间,所以先调用一下.
   showTime();
    //3.每一秒种都要根据当前的时间旋转.
    setInterval(showTime,100);
    //封装一下
    function showTime(){
        //a.获取当前的时间,时分秒 - 根据当前的时分秒去计算那三个div的旋转角度.
        var date = new Date();
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();
        var minSec = date.getMilliseconds();

        //b.根据这个事件计算角度
        //一个圆360,12个小时,所以一个小时30度.
        //一分钟6度.
        //一秒钟6度.
        var hourDeg = (hour + min/60) * 30;
        var minDeg = (min + sec/60) * 6;
        var secDeg = (sec + minSec/1000)* 6;
        //c.把这个角度设置给那时分秒三个div.
        hourDiv.style.transform = "rotate("+hourDeg+"deg)";
        minDiv.style.transform = "rotate("+minDeg+"deg)";
        secDiv.style.transform = "rotate("+secDeg+"deg)";
    }
</script>
</body>
</html>