原生js实现毫秒拖拽时钟

最终效果图：
clock.png
具体代码如下：
<!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四步实现毫秒拖拽时钟
原生js实现毫秒拖拽时钟

推荐阅读更多精彩内容
