网页钟表小设计(网页小练习)

实现效果(截图为静态图):

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

<!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);
</script>
</body>
</html>

发布了69 篇原创文章 · 获赞 51 · 访问量 4470
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览