纯前端实现—网页钟表设计-CFANZ编程社区

纯前端实现—网页钟表设计

实现效果：

手动实现钟表

源码：

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

<body onload="clock()">              <!--onload当页面加载完毕之后，立即执行相应的函数-->
<div class="clock">
    <div class="hour" id="hour"></div>
    <div class="minute" id="minute"></div>
    <div class="second" id="second"></div>
</div>

<script>
    // 获取元素
    var hours = document.getElementById("hour");
    var minutes = document.getElementById("minute");
    var seconds = document.getElementById("second");
    // 时钟的函数
    function clock() {

        // 获取时间
        var date = new Date();
        // 获取秒数
        var ms = date.getMilliseconds();
        var s = date.getSeconds() + ms/1000;
        var m = date.getMinutes() + s/60;
        // 获取的小时是24制，取余得到的是12制
        var h = date.getHours()%12 + m/60;

        // 设置表盘里指针转换的角度             图片旋转的样式设置为：transform: rotate(90deg);
        // 秒针转换的角度： 360/60=6
        seconds.style.transform = "rotate(" + s*6 + "deg)";
        // 分针转换的角度： 360/60=6
        minutes.style.transform = "rotate(" + m*6 + "deg)";
        // 时针转化的角度： 360/12=30
        hours.style.transform = "rotate(" + h*30 + "deg)";
    }
    // 设置定时器
    setInterval("clock()",10);      //时间单位是毫秒，10ms即1s。
</script>

</body>

</html>