Js简易时钟

最新推荐文章于 2021-07-04 15:20:53 发布

全栈小李

最新推荐文章于 2021-07-04 15:20:53 发布

阅读量190

点赞数 2

分类专栏： Js 文章标签： js css html web

本文链接：https://blog.csdn.net/qq_45162683/article/details/110945916

版权

Js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style>
    .bp{
        width: 500px;
        height: 500px;
        margin: 0 auto;
        border-radius:250px ;
        border: 2px dashed aqua;
        position: relative;
        background-image: url("timg.png");
        background-size:cover ;
      }
     #sz{
         width: 100px;
         height: 5px;
         background: black;
         position: absolute;
         left: 249px;
         top: 248px;
         transform-origin:0 center ;


     }
    #fz{
        width: 150px;
        height: 5px;
        background: red;
        position: absolute;
        left: 249px;
        top: 248px;
        transform-origin:0 center ;

    }
    #mz{
        width: 200px;
        height: 5px;
        background: green;
        position: absolute;
        left: 249px;
        top: 248px;
        transform-origin:0 center ;

    }


</style>

<div class="bp">

    <div id="sz"></div>
    <div id="fz"></div>
    <div id="mz"></div>

</div>

</body>

<script>

    onload=function(){
        setInterval(function(){
                    getTm();
                }
                ,1000)

        function getTm(){
            var sz=document.getElementById("sz");
            var fz= document.getElementById("fz");
            var mz=document.getElementById("mz");

            var date=new Date();
            sz.style.transform="rotate("+(date.getHours()*30-90)+"deg)"
            fz.style.transform="rotate("+(date.getMinutes()*6-90)+"deg)"
            mz.style.transform="rotate("+(date.getSeconds()*6-90)+"deg)"

        }
    }


</script>
</html>

效果图：
在这里插入图片描述
可以根据自己喜欢的表盘自己设置
如果想要现在这个图片可以私信博主

全栈小李

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
Js简易时钟

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><style> .bp{ width: 500px; height: 500px; margin: 0 auto; border
复制链接

扫一扫