使用svg实现动态时钟效果


Posted in Javascript onJuly 17, 2018

一个使用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 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
使用vue制作滑动标签
Sep 21 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
你准备好迎接vue3.0了吗
Apr 28 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 #Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 #Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 #Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 #Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 #Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 #Javascript
微信小程序倒计时功能实例代码
Jul 17 #Javascript
You might like
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
RC4文件加密的python实现方法
2015/06/30 Python
理解python正则表达式
2016/01/15 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
先进事迹报告会主持词
2014/04/02 职场文书
调解协议书
2014/04/16 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
初中思想品德教学反思
2016/02/24 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python