css3和原生js时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div{
        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;
        4px;
        background: red;
        border-radius: 50% 50% 0 0;
    }
    .min{
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-3px;
        margin-top:-60px;
        height:60px;
        6px;
        background: #000;
        border-radius: 50% 50% 0 0;
    }
    .hou{
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-4px;
        margin-top:-40px;
        height:40px;
        8px;
        background: #000;
        border-radius: 50% 50% 0 0;
    }
    .cap{
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-6px;
        margin-top:-6px;
        height:12px;
        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>

相关阅读:
npm, node, pm2 使用笔记
 没加证书的域名通过https访问，错误的访问到有证书的域名项目--已解决
 mysql数据库大表加索引
 上传大文件失败
 ifame 与父页面进行数据交互（跨域）
windows平台编译PHP及扩展和踩过的坑
 vim 使用笔记
 git 在pull/push指定密钥文件
 记一次使用Xshell登陆提示所选用户密钥未在远程主机上注册
 学习网站与参考文档
原文地址：https://www.cnblogs.com/jasonwang2y60/p/6091510.html