使用svg实现动态时钟效果

  • 更新时间:2022-06-22 06:45:53
  • 编辑:贡和璧
给网友们整理javascript相关的编程文章,网友印英耀根据主题投稿了本篇教程内容,涉及到svg、时钟相关内容,已被133网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。

参考资料

正文内容

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

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

javascript相关教程

  • JavaScript输出所选择起始与结束日期的实例代码

    这篇文章主要介绍了JavaScript输出所选择起始与结束日期的方法,涉及javascript结合HTML5元素操作日期运算的相关实现技巧,需要的朋友可以参考下

    发布时间:2019-08-02

  • 探讨JavaScript中的Rest参数和参数默认值

    这篇文章的主要介绍了JavaScript中的Rest参数和参数默认值,内容很充实,需要了解的朋友可以参考下

    发布时间:2019-12-19

  • javascript数值强制转换方法总结

    本篇文章给大家带来的内容是关于javascript中的数值如何进行强制转换?(方法总结),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    发布时间:2018-09-21

  • JavaScript中的ignoreCase属性使用方法

    这篇文章主要介绍了JavaScript正则表达式中的ignoreCase属性使用详解,是JS学习进阶中的重要知识点,需要的朋友可以参考下

    发布时间:2020-01-05

  • JavaScript实现百度搜索框的过程

    这篇文章主要为大家详细介绍了基于JavaScript实现百度搜索框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    发布时间:2020-07-24

  • JavaScript使用atan2绘制箭头和曲线的方法详解

    下面小编就为大家带来一篇JavaScript使用atan2来绘制箭头和曲线的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2019-11-20

  • JavaScript按概率随机生成代码整理

    本篇文章主要介绍了详解JavaScript按概率随机生成事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    发布时间:2020-02-09

用户留言