Js 实现时钟效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{width: 225px;height: 225px;background: url("img/biaopan.jpg")no-repeat;
            position: relative;margin: 100px auto 0;background-position: -33px -8px;
            border-radius: 50%}
        #dian{width: 2px;height: 2px;background: green;position: absolute;
            top: 112px;left: 112px}
        #shi{width: 6px;height: 60px;background: #000;position: absolute;
            left: 110px;top: 70px;transform-origin: 50% 72%}
        #fen{width: 4px;height: 80px;position: absolute;left: 111px;top: 50px;
            background: #000;transform-origin: 50% 79%}
        #miao{width: 2px;height: 100px;position: absolute;left: 112px;top:40px;
            background: red;transform-origin: 50% 73%;}

    </style>
</head>
<body>
<div id="box">
    <div id="shi"></div>
    <div id="fen"></div>
    <div id="miao"></div>
    <div id="dian"></div>
</div>
</body>
</html>
<script>
    var shi=document.getElementById('shi'),
        fen=document.getElementById('fen'),
        miao=document.getElementById('miao')

    function  clock() {
        var time=new Date(),
            s=time.getSeconds(),
            m=time.getMinutes(),
            h=time.getHours()
        miao.style.transform='rotate('+s*6+'deg)'
        fen.style.transform='rotate('+(m+s/60)*6+'deg)'
        shi.style.transform='rotate('+(h+m/60+s/3600)*30+'deg)'

    }

    clock()
    setInterval(clock,1000)

</script>

 

posted @ 2021-12-09 10:26  小马学编程  阅读(124)  评论(0)    收藏  举报