时钟

最新推荐文章于 2021-03-30 22:00:55 发布

IT_WEB_WZZ

最新推荐文章于 2021-03-30 22:00:55 发布

阅读量277

点赞数 1

分类专栏： html代码文章标签： html5

本文链接：https://blog.csdn.net/IT_WEB_WZZ/article/details/78697085

版权

html代码专栏收录该内容

3 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background-color: #ececec;
        }
       .container{
           position: relative;
           width:800px;
           height:600px;
           margin:100px auto;
       }
       .plate{
           width:500px;
           height:500px;
           margin:50px auto;
       }
       .container .hour{
           position: absolute;
           top:0;
           left:150px;
           width:500px;
           height:500px;
           background:url(img/s.png) no-repeat 0 0 / 500px 500px;
       }
       .container .minute{
           position: absolute;
           top:1px;
           left:150px;
           width:500px;
           height:500px;
           background:url(img/f.png) no-repeat 0 0 / 500px 500px;
       }
       .container .second{
           position: absolute;
           top:0;
           left:150px;
           width:500px;
           height:500px;
           background:url(img/m.png) no-repeat 0 0 / 500px 500px;
       }
    </style>
</head>
<body>
<div class="container">
    <div class="plate">
        <img src="img/plate.png" alt=""/>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
    </div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    function setTime() {
        var date = new Date;
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        if(hour>=12)hour=hour-12;
        hour=hour+minute/60;
//        minute=minute+second/60;
        $(".hour").css('transform', 'rotate(' + hour*30  + 'deg)');
        $(".minute").css('transform', 'rotate(' + minute*6 + 'deg)');
        $(".second").css('transform', 'rotate(' + second*6 + 'deg)');
    }
    setTime();
    setInterval(setTime, 1000);  //一秒循环一次


</script>
</body>
</html>

IT_WEB_WZZ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
时钟

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background-color: #ececec; } .container{ position:
复制链接

扫一扫