简单js时钟

 

js旋转时钟效果如图

详细代码如下

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
#tu{width: 225px;height: 225px;background: url("../img/QQ图片20211119172850.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}
    #h{width: 6px;height: 60px;background: #000;position: absolute;
    left: 110px;top: 70px;transform-origin: 50% 72%}
    #m{width: 4px;height: 80px;position: absolute;left: 111px;top: 50px;
    background: #000;transform-origin: 50% 79%}
    #s{width: 2px;height: 100px;position: absolute;left: 112px;top:40px;
    background: red;transform-origin: 50% 73%;}
    </style>
</head>

<body>
    <div id="tu">
        <div id="h">11</div>
        <div id="m">22</div>
        <div id="s"></div>
        <div id="dian"></div>
    </div>
</body>

</html>
<script>
    //获取当前时间戳
    console.log(new Date())
    console.log(new Date().getMonth())
    console.log(new Date().getFullYear())
    console.log(new Date().getDate())
    console.log(new Date().getSeconds())

    var s = document.getElementById('s')
    var m = document.getElementById('m')
    var h = document.getElementById('h')
    // s.style.transform='rotate('+new Date().getSeconds()*6+'deg)'
    function clock() {
         var time=new Date(),
         sz=time.getSeconds()
         mz=time.getMinutes()
         hz=time.getHours()

        s.style.transform = 'rotate(' +  sz* 6 + 'deg)'
        m.style.transform = 'rotate(' + (mz+sz/60)*6 + 'deg)'
        h.style.transform = 'rotate(' +  (hz+mz/60+sz/3600)* 30 + 'deg)'
    }
    clock()
     setInterval (clock,1000) 
    
</script>

 


素材图

 

 

posted on 2021-11-20 14:44  兮宇  阅读(220)  评论(0)    收藏  举报