使用svg实现动态时钟效果

2019-11-19 13:28:50

字体：大中小

来源：转载

供稿：网友

一个使用svg做的动态时钟，供大家参考，具体内容如下

怎么样很酷吧，以下是源码：

<!DOCTYPE html><html>  <title>SVG clock</title>      <meta http-equiv="content-type" content="text/html;charset=utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- Bootstrap -->  <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" >  <!-- <link rel="stylesheet" type="text/css" href="canvas.css" rel="external nofollow" media="all" />-->  <style type="text/css">    #clock {        stroke: #adcd3c;      stroke-linecap: round;      fill: #f2fddb;    }    #face {      stroke-width: 3px;          }    #ticks {      stroke-width: 2px;    }    #hands line {              stroke-linejoin: bevel;            }    #hourhand {      stroke-width: 4px;                }    #minutehand {      stroke-width: 3px;            }    #numbers {      font-size: 16px;      text-anchor: middle;      stroke: none;      fill: #92b0dd;    }  </style>  <script type="text/javascript">    function updateTime() {      var now = new Date();      var second = now.getSeconds();      var min = now.getMinutes();      var hour = (now.getHours() % 12) + min / 60;      var secondangle = second * 6; //6 degrees for every minute      var minangle = min * 6;    //6 degrees for every minute      var hourangle = hour * 30;  //30 degrees for every hour            var minhand = document.getElementById('minutehand');      var hourhand = document.getElementById('hourhand');            var secondhand = document.getElementById('secondhand');      var shadhand = document.getElementById("shadow");      var clocks = document.getElementById("clock");      if(second%2==0){        //alert(clocks);          clocks.style.stroke="#adcd3c";        }else{          //alert(secondangle);          clocks.style.stroke="#ad223c";      }            minhand.setAttribute('transform', 'rotate(' + minangle + ', 50, 50)');      hourhand.setAttribute('transform', 'rotate(' + hourangle + ', 50, 50)');      secondhand.setAttribute('transform', 'rotate(' + secondangle + ', 50, 50)');      for (var i = shadhand.childElementCount - 1; i >= 0; i--) {       var chr = shadhand.children[i];        switch (chr.tagName)              {              case "feGaussianBlur":              /*if(secondangle/2)==1){               chr.setAttribute(dx=-1)                }else{                  chr.setAttribute(dx=1)                }               alert(chr.tagName);*/               break;              case "feOffset":              if(second%2==0){                //alert(secondangle);                  chr.setAttribute("dx","-3");                }else{                  //alert(secondangle);                  chr.setAttribute("dx","3");                }               //alert(chr.tagName);               break;              case "feMerge":                /*for (var i = 0; i < chr.childElementCount -1; i++) {                  chr.children[i].                };*/               //alert(chr.tagName);               break;              default:               alert("could not found the Attribute");              }      };       setTimeout(updateTime, 1000); //update time for every second    }  </script><body onload="updateTime()">  <svg id="clock" viewBox="0 0 100 100" width="500" height="500">    <defs>      <!-- define an filter use to add shadow of some element -->      <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />        <feOffset in="blur" dx="-1" dy="1" result="shadow" lighting-color = "#adcd3c"/>        <feMerge>          <feMergeNode in="SourceGraphic"/>          <feMergeNode in="shadow" />        </feMerge>      </filter>    </defs>    <!-- clock face -->    <circle id="face" cx="50" cy="50" r="45" />    <!-- mark time lines -->    <g id="ticks">      <line x1="50.00" y1="5.000" x2="50.00" y2="10.00" />      <line x1="72.50" 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.90" 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.90" 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.00" x2="30.00" y2="15.36" />    </g>    <!-- mark some important numbers -->    <g id="numbers">       <text x="50" y="20">12</text>      <text x="85" y="55">3</text>      <text x="50" y="88">6</text>      <text x="15" y="55">9</text>          </g>    <!-- show hands -->    <g id="hands" filter="url(#shadow)">      <line id="hourhand" x1="50" y1="50" x2="50" y2="24" />      <line id="minutehand" x1="50" y1="50" x2="50" y2="20" />      <line id="secondhand" x1="50" y1="50" x2="50" y2="16" />    </g>      </svg></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue脚手架搭建项目的兼容性配置详解

下一篇：详解.vue文件中style标签的几个标识符