欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用svg实现动态时钟效果

程序员文章站 2023-11-09 10:24:46
一个使用svg做的动态时钟,供大家参考,具体内容如下 怎么样很酷吧,以下是源码: ...

一个使用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>

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