JS四步实现毫秒拖拽时钟

最新推荐文章于 2022-03-13 17:21:21 发布

Suyd

最新推荐文章于 2022-03-13 17:21:21 发布

阅读量1.1k

点赞数 3

分类专栏： Javascript 文章标签： javascript

Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最终效果图：
这里写图片描述

具体代码如下：

<!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>