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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
详解vue中computed 和 watch的异同
Jun 30 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 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
世界收音机发展史
2021/03/01 无线电
phpfans留言版用到的install.php
2007/01/04 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
php进程间通讯实例分析
2016/07/11 PHP
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
金士达面试非笔试
2012/03/14 面试题
高一新生军训感言
2014/03/02 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
学雷锋倡议书
2015/01/19 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
南京南京观后感
2015/06/02 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis