首页 > 其他分享> > 网页钟表小设计（网页小练习）

网页钟表小设计（网页小练习）

2021-06-09 18:54:01 作者：互联网

实现效果（截图为静态图）：

在这里插入图片描述 ## 代码实现：

<!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 onl oad="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);
</script>
</body>
</html>

标签：rotate,网页,center,clock,练习,transform,date,钟表,var
来源： https://blog.51cto.com/u_15264787/2886742