使用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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
table行随鼠标移动变色示例
May 07 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
详解.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
php桌面中心(一) 创建数据库
2007/03/11 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
node.js中使用socket.io的方法
2014/12/15 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
Python中的类与对象之描述符详解
2015/03/27 Python
python在非root权限下的安装方法
2018/01/23 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
校领导推荐信
2013/11/01 职场文书
商场中秋节广播稿
2014/01/17 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
公司任命书模板
2014/06/06 职场文书
董事长秘书工作职责
2014/06/10 职场文书
岳麓书院导游词
2015/02/03 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书