js+svg动态模拟时钟

  <style type="text/css">
    #clock{
      stroke: black;
      stroke-linecap:round;
      fill: #eef;
    }
    #face{
      stroke-width:3px;
    }
    #ticks{
      stroke-width:2;

    }
    #hourhand{
      stroke-width:3px;

    }
    #minutehand{
      stroke-width:2px;
    }
    #secondhand{
      stroke-width:1px;
    }
    #numbers{
      font-family: sans-serif;
      font-size: 7pt;
      font-weight: bold;
      text-anchor: middle;
      stroke: none;
      fill: black;
    }
  </style>

    <div class="clock">
      <svg id='clock' viewBox='0 0 100 100' width='500'  height='500'> 
        <defs>
          <filter id='shadow' x='-50%' y='-50%' width='200%' height='200%'>
            <feGaussianBlur in='SourceAlpha' stdDeviation='1' result='blur' />
            <feOffset in='blur' dx='1' dy='1' result='shadow' />
            <feMerge>
              <feMergeNode in='SourceGraphic'/><feMergeNode in='shadow'/>
            </feMerge>
          </filter>
        </defs>
        <circle id='face' cx='50' cy='50' r='45'/>
        <g id='ticks'>
          <line x1='50' y1='5.000' x2='50.00' y2='10.00'/>
          <line x1='72.5' y1='11.03' x2='70.00' y2='15.36'/>
          <line x1='88.97' y1='27.50' x2='84.64' y2='30.00'/>
          <line x1='95.00' y1='50.00' x2='90.00' y2='50.00'/>
          <line x1='88.97' y1='72.50' x2='84.64' y2='70.00'/>
          <line x1='72.50' y1='88.97' x2='70.00' y2='84.64'/>
          <line x1='50.00' y1='95.00' x2='50.00' y2='90.00'/>
          <line x1='27.50' y1='88.97' x2='30.00' y2='84.64'/>
          <line x1='11.03' y1='72.50' x2='15.36' y2='70.00'/>
          <line x1='5.000' y1='50.00' x2='10.00' y2='50.00'/>
          <line x1='11.03' y1='27.50' x2='15.36' y2='30.00'/>
          <line x1='27.50' y1='11.03' x2='30.00' y2='15.36'/>
        </g>
        <g id='number'>
          <text x='40' y='23'>12</text>
          <text x='80' y='56'>3</text>
          <text x='45' y='88'>6</text>
          <text x='11' y='56'>9</text>
        </g>
        <g id='hands' filter='url(#shadow)'>
          <line id='hourhand' x1='50' y1='50' x2='50' y2='30'/>
          <line id='minutehand' x1='50' y1='50' x2='50' y2='20'/>
          <line id='secondhand' x1='50' y1='50' x2='50' y2='10'/>
        </g>
      </svg>
    </div>

    <script type='text/javascript'>

    window.onload = function(){
      console.log('kaishi')
      let clock = document.querySelector('body');
      
      setInterval(updateTime,0)
    }
    function updateTime(){
      
      var now = new Date();
      var min= now.getMinutes();
      var hour = (now.getHours()%12)+min/60;
      var sec = now.getSeconds();
      var minangle=min*6;
      var hourangle = hour*30;
      var seangle = sec*6;
      var minhand = document.getElementById('minutehand');
      var hourhand = document.getElementById('hourhand');
      var secondhand = document.getElementById('secondhand');
      minhand.setAttribute('transform','rotate('+minangle+',50,50)');
      hourhand.setAttribute('transform','rotate('+hourangle+',50,50)');
      secondhand.setAttribute('transform','rotate('+seangle+',50,50)');
      
    }
</javascript>

博客园怎么插入不了视频？所以只能放张图片感觉一下吧，这有缺陷，会在某个时刻闪现一下，或者在某个时刻渲染不完整，出现意外的结果，还有就是会在某个时刻可能会出现跳秒，因为定时器会有误差，秒钟动画下次可以试试用绘图引擎，目前还不会。