js小时钟 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{width: 225px;
            height: 225px;
            background: url("1.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>
 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)'时针转动
posted @ 2021-11-26 15:58  clearlove3  阅读(20)  评论(0)    收藏  举报