css3和原生js时钟

Posted 2020-08-20 Jason齐齐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3和原生js时钟相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div{
        width:200px;
        height:200px;
        border-radius: 50%;
        border:1px solid #000;
        position: relative;
        margin:5px auto;
        text-align: center;
        box-shadow: 0px 0px 20px 5px #000;
    }
    div span{
        transform-origin: bottom center;
    }
    .sec{
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-2px;
        margin-top:-80px;
        height:80px;
        width:4px;
        background: red;
        border-radius: 50% 50% 0 0;
    }
    .min{
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-3px;
        margin-top:-60px;
        height:60px;
        width:6px;
        background: #000;
        border-radius: 50% 50% 0 0;
    }
    .hou{
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-4px;
        margin-top:-40px;
        height:40px;
        width:8px;
        background: #000;
        border-radius: 50% 50% 0 0;
    }
    .cap{
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-6px;
        margin-top:-6px;
        height:12px;
        width:12px;
        background: radial-gradient(#ccc,#999);
        border-radius: 50%;
    }
    i b{
        position: absolute;
        top:12px;
        left:-4px;
    }
    </style>
    <script>
    window.onload=function(){
        var aSpan=document.querySelectorAll(‘span‘);
        var oBox=document.getElementById(‘box‘);
        clock();
        setInterval(clock,30);

        for (var i = 0; i <60; i++) {
            var oI=document.createElement(‘i‘);
            oI.style.width=‘6px‘;
            if(i%5){
                oI.style.height=‘8px‘;
            }else{
                oI.innerHTML=‘<b>‘+i/5+‘</b>‘;
                oI.children[0].style.transform=‘rotate(-‘+i*6+‘deg)‘;
                oI.style.height=‘16px‘;
            }
            
            oI.style.position=‘absolute‘;
            oI.style.top=‘0px‘;
            oI.style.left=‘100px‘;
            oI.style.background=‘#000‘;
            oI.style.transform=‘rotate(‘+i*6+‘deg)‘;
            oI.style.transformOrigin=‘0px 100px‘;

            oBox.appendChild(oI);
        }
        function clock(){
            var oDate=new Date();
            var h=oDate.getHours();
            var m=oDate.getMinutes();
            var s=oDate.getSeconds();
            var ms=oDate.getMilliseconds();
            
            aSpan[2].style.transform=‘rotate(‘+(360*(h%12)/12+m*30/60)+‘deg)‘;
            aSpan[1].style.transform=‘rotate(‘+(360*m/60+s*6/60)+‘deg)‘;
            aSpan[0].style.transform=‘rotate(‘+(360*s/60+ms*6/1000)+‘deg)‘;
        }
    };
    </script>
</head>
<body>
    <div id="box">
        <span class="sec"></span>
        <span class="min"></span>
        <span class="hou"></span>
        <p class="cap"></p>
    </div>
</body>
</html>

以上是关于css3和原生js时钟的主要内容，如果未能解决你的问题，请参考以下文章

转载《时钟效果》

转CSS3+js实现多彩炫酷旋转圆环时钟效果

移动端原生js，css3实现轮播图

JavaScript之“创意时钟”项目

js原生制作时钟

仿智能社官网：原生JS实现简单又酷炫的3D立方体时钟