使用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 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
七个很有意思的PHP函数
May 12 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
countUp.js实现数字滚动效果
Oct 18 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
php反弹shell实现代码
2009/04/22 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
PHP实现微信对账单处理
2018/10/01 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
javascript中的this详解
2014/12/08 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
bootstrap table小案例
2016/10/21 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
出国签证在职证明
2014/01/16 职场文书
实验教师岗位职责
2014/02/13 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
Python编写nmap扫描工具
2021/07/21 Python
Python编程源码报错解决方法总结经验分享
2021/10/05 Python