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 相关文章推荐
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
详解JavaScript对象类型
Jun 16 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
webpack的移动端适配方案小结
Jul 25 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
深入php var_dump()函数的详解
2013/06/05 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
python实现的文件同步服务器实例
2015/06/02 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
python版DDOS攻击脚本
2019/06/12 Python
Django用户认证系统 User对象解析
2019/08/02 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
财务会计专业推荐信
2013/11/30 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
北京导游词
2015/02/12 职场文书
民事上诉状范文
2015/05/22 职场文书
开场白怎么写
2015/06/01 职场文书
寻找成龙观后感
2015/06/12 职场文书
任长霞观后感
2015/06/16 职场文书