JS四步实现毫秒拖拽时钟

来源：互联网发布：java 树遍历treenode 编辑：程序博客网时间：2024/05/21 11:29
最终效果图：
这里写图片描述
具体代码如下：
<!doctype html><html><head><meta charset="utf-8"><title></title><style>    *        {         margin:0;         padding:0;         list-style:none;        }    /*圆形表盘*/    #box        {         width:300px;         height:300px;         border:1px solid #000;         border-radius:50%;         position:absolute;         left:300px;         top:100px;         background:#fff;         box-shadow:1px 1px 5px #000;        }    #box .cap        {         width:20px;         border-radius:50%;         height:20px;         background:#999;         position:absolute;         left:50%;         top:50%;         margin:-10px 0 0 -10px;        }    #box div        {         transform-origin:center bottom;        }    #box .hour        {         width:14px;         height:80px;         background:#000;         position:absolute;         left:50%;         margin-left:-7px;         top:50%;         margin-top:-80px;         border-radius:50% 50% 0 0;        }    #box .min        {         width:10px;         height:100px;         background:#282828;         position:absolute;         left:50%;         margin-left:-5px;         top:50%;        margin-top:-100px;        border-radius:50% 50% 0 0;        }    #box .sec        {         width:4px;         height:120px;         background:#f00;         position:absolute;         left:50%;         margin-left:-2px;         top:50%;         margin-top:-120px;        }    .scale        {         width:4px;         height:10px;         background:#000;         position:absolute;         left:50%;         margin-left:-2px;         transform-origin:center 150px;        }    /*整点刻度样式*/    .bs        {         width:6px;         height:18px;         background:#000;         position:absolute;         left:50%;         margin-left:-3px;        transform-origin:center 150px;        }    /*分钟刻度样式*/    #box span em        {         margin-top:20px;         width:100px;         position:absolute;         left:50%;         margin-left:-50px;         text-align:center;        font-style:normal;        }</style><script>window.onload=function(){    //获取元素    var oBox=document.getElementById('box');    var oH=document.querySelector('.hour');    var oM=document.querySelector('.min');    var oS=document.querySelector('.sec');    //生成刻度    var N=60;    //创建元素    for(var i=0; i<N; i++){        var oSpan=document.createElement('span');        //将小时刻度与分钟刻度区分开并添加class        if(i%5==0){//整点刻度            oSpan.className='bs';            var num=i/5==0?12:i/5;            oSpan.innerHTML='<em>'+num+'<\/em>';            //调整角度与钟框垂直            oSpan.children[0].style.transform='rotate('+-i*6+'deg)';        }else{//分钟刻度            oSpan.className='scale';            }        oBox.appendChild(oSpan);        oSpan.style.transform='rotate('+6*i+'deg)';    }    function clock(){        var oDate=new Date();        var h=oDate.getHours();        var m=oDate.getMinutes();        var s=oDate.getSeconds();        var ms=oDate.getMilliseconds();        oH.style.transform='rotate('+(h*30+m/60*30)+'deg)';        oM.style.transform='rotate('+(m*6+s/60*6)+'deg)';        oS.style.transform='rotate('+(s*6+ms/1000*6)+'deg)';        }    //防止打开卡顿一下    clock();    //设置定时器    setInterval(clock,30);    drag(oBox);    //拖拽    function drag(oDiv){        oDiv.onmousedown=function(ev){            var oEvent=ev || event;            //获取旧位置            var disX=oEvent.clientX-oDiv.offsetLeft;            var disY=oEvent.clientY-oDiv.offsetTop;            document.onmousemove=function(ev){                var oEvent=ev || event;                 //设置新位置                oDiv.style.left=oEvent.clientX-disX+'px';                oDiv.style.top=oEvent.clientY-disY+'px';                };            document.onmouseup=function(){                document.onmousemove=null;                document.onmouseup=null;                    //释放捕获                oDiv.releaseCapture && oDiv.releaseCapture();            };            //设置捕获            oDiv.setCapture && oDiv.setCapture();            return false;            };    };};</script></head><body><div id="box">    <div class="hour"></div><!-- 时针 -->    <div class="min"></div><!-- 分针 -->    <div class="sec"></div><!-- 秒针 -->    <div class="cap"></div><!-- 表盘圆点 --></div></body></html>
转载：
JS四步实现毫秒拖拽时钟
0 0