使用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 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 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脚本数据库功能详解(下)
2006/10/09 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
常用jQuery代码分享
2015/07/14 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
python实现的文件夹清理程序分享
2014/11/22 Python
pygame播放音乐的方法
2015/05/19 Python
Python中tell()方法的使用详解
2015/05/24 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
基于python socketserver框架全面解析
2017/09/21 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
关于Python-faker的函数效果一览
2019/11/28 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
Python中求对数方法总结
2020/03/10 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
班级光棍节联谊会策划书
2014/10/10 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL