js+SVG实现动态时钟效果


Posted in Javascript onJuly 14, 2018

本文实例为大家分享了js+SVG实现动态时钟效果展示的具体代码,供大家参考,具体内容如下

js+SVG实现动态时钟效果

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<head>
<title>Analog Clock</title>
<script>
function updateTime() { 
 var now = new Date();      // 当前时间
 var min = now.getMinutes();     // 分钟
 var hour = (now.getHours() % 12) + min/60; // 转行成可以在时钟上表示的时间
 var seconds = now.getSeconds();    //秒钟
 var minangle = min*6;      // 6度表示一分钟
 var hourangle = hour*30;     // 30 表示一小时
 var secrangel = seconds * 6;    // 6度表示一秒钟
 // 获取表示时钟时针的SVG元素
 var minhand = document.getElementById("minutehand");
 var hourhand = document.getElementById("hourhand");
 var secondhand = document.getElementById("secondhand");

 // 设置这些元素的SVG属性,将它们移动到钟面上
 minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");
 hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");
 secondhand.setAttribute("transform", "rotate(" + secrangel + ",50,50)");
 // 每秒钟更新下时钟显示时间
 setTimeout(updateTime, 1000);
}
</script>
<style>

#clock {       
 stroke: black;     
 stroke-linecap: round;   
 fill: #eef;     
}
#face { stroke-width: 2px;}  
#ticks { stroke-width: 2px; }  
#hourhand {stroke-width: 3px;} 
#minutehand {stroke-width: 2px;} 
#secondhand{stroke-width: 1px;}
#numbers {      
 font-family: sans-serif; font-size: 7pt; font-weight: bold; 
 text-anchor: middle; stroke: none; fill: black;
}
</style>
</head>
<body onload="updateTime()">
 <!-- viewBox是坐标系,width和height是指屏幕大小 -->
 <svg id="clock" viewBox="0 0 100 100" width="500" height="500"> 
 <defs> <!-- 定义下拉阴影的滤镜 -->
  <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
  <feOffset in="blur" dx="1" dy="1" result="shadow" />
  <feMerge>
   <feMergeNode in="SourceGraphic"/><feMergeNode in="shadow"/>
  </feMerge>
  </filter>
 </defs>
 <circle id="face" cx="50" cy="50" r="45"/> <!-- 钟缅 -->
 <g id="ticks">        <!-- 12小时的刻度 -->
  <line x1='50' 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.97' 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.97' 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.03' x2='30.00' y2='15.36'/>
 </g>
 <g id="numbers">      <!-- 标记重要的几个刻度值-->
  <text x="50" y="18">12</text><text x="85" y="53">3</text>
  <text x="50" y="88">6</text><text x="15" y="53">9</text>
 </g>
 <!-- 初始绘制成竖直的指针,之后通过js来做旋转 -->
 <g id="hands" filter="url(#shadow)"> <!-- 给指针添加阴影 -->
  <line id="hourhand" x1="50" y1="50" x2="50" y2="25"/>
  <line id="minutehand" x1="50" y1="50" x2="50" y2="18"/>
  <line id="secondhand" x1="50" y1="50" x2="50" y2="11"/>
 </g>
 </svg>
</body>
</html>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 得到变量类型的函数
May 19 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
vue实现通讯录功能
Jul 14 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
vue实现通讯录功能
Jul 14 #Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 #Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 #Javascript
微信小程序实现自上而下字幕滚动
Jul 14 #Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 #Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 #Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 #Javascript
You might like
PHP 中dirname(_file_)讲解
2007/03/18 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
JQuery小知识
2010/10/15 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
iview中Select 选择器多选校验方法
2018/03/15 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Django实现分页显示效果
2019/10/31 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
中职生自荐信
2013/10/13 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
班主任先进事迹材料
2014/12/17 职场文书
技术员岗位职责
2015/02/04 职场文书
值班管理制度范本
2015/08/06 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技