js实现钟表

最新推荐文章于 2022-08-03 14:36:08 发布

不归少年

最新推荐文章于 2022-08-03 14:36:08 发布

阅读量347

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/Wang_jiao_yaa/article/details/99711474

版权

javascript 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>钟表</title>
    <style>
        .content {
            width: 400px;
            height: 400px;
            background: url(images/bgimage_03.gif) no-repeat;
            background-size: 400px;
            margin: auto;
            position: relative;
        }
        .shi {
            width: 90px;
            height: 10px;
            background: url("images/shi.png") no-repeat;
            background-size: 90px;
            position: absolute;
            top: 195px;
            left: 195px;
            transform-origin: 6.67% 50%;
        }
        .fen {
            width: 120px;
            height: 10px;
            background: url("images/fen.png") no-repeat;
            background-size: 120px;
            position: absolute;
            top: 195px;
            left: 198px;
            transform-origin: 0.8% 50%;
        }
        .miao {
            width: 200px;
            height: 10px;
            background: url("images/miao.png") no-repeat;
            background-size: 200px;
            position: absolute;
            top: 195px;
            left: 162px;
            transform-origin:19% 60%;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="shi"></div>
    <div class="fen"></div>
    <div class="miao"></div>
</div>

<script>
    //获取对象
    var shi= document.getElementsByClassName("shi")[0];
    var fen=document.getElementsByClassName("fen")[0];
    var miao= document.getElementsByClassName("miao")[0];
    // 计时器
    setInterval(function (){
        //获取当前时间
        var newdate=new Date();
        //秒
        var sec=newdate.getSeconds();
        miao.style.transform="rotate("+(sec*6-90)+"deg)";
        //分
        var min=newdate.getMinutes()+sec/60;
        fen.style.transform="rotate("+(min*6-90)+"deg)";
        //时
        var hour=(newdate.getHours()+min/60)*30;
        shi.style.transform="rotate("+(hour-90)+"deg)";
    },1000);
</script>
</body>
</html>

总结

1、transform-origin

2、因为刚开始的位置摆在了水平方向，而钟表的方向是从12开始的，所以时分秒都应该减去90度
3、rorate属性 改变的是行内样式rorate的值 他在每秒都是变化的，不是说相对于上次的位置继续旋转多少度

不归少年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现钟表

代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>钟表</title> <style> .content { width: 400px; ...
复制链接

扫一扫

专栏目录