js SVG实现动态时钟效果

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

！DOCTYPE HTMLhtmlmeta字符集=' utf-8 '标题模拟时钟/标题脚本函数updateTime(){ var now=new Date()；//当前时间var min=now。getminutes()；//分钟var hour=(现在。get hours()% 12)min/60；//转行成可以在时钟上表示的时间var秒=现在。getseconds()；//秒钟var minangle=min * 6；//6度表示一分钟var hourangle=小时* 30//30表示一小时var secrangel=秒* 6;//6度表示一秒钟//获取表示时钟时针的挽救(保存的简写)元素var Minh and=文档。getelementbyid(' minuth hand ')；var时针=文件。getelementbyid('时针')；var secondary=文档。getelementbyid(' secondary ')；//设置这些元素的挽救(保存的简写)属性，将它们移动到钟面上明和。SetAttribute(' transform '，' rotate '(' minangle '，50，50 '))；时针。SetAttribute(' transform '，' rotate(' hourangle '，50，50)')；次要的。setattribute(' transform '，' rotate(' secrangel '，50，50)')；//每秒钟更新下时钟显示时间setTimeout(updateTime，1000)；}/脚本样式# clock { stroke : black笔画线cap:圆；fill: # eef} # face {笔画宽度： 2px} #刻度{笔画宽度： 2px} #时针{笔画宽度： 3px} #分针{笔画宽度： 2px} #二手{笔画宽度： 1px} # numbers { font-family : sans-serif；font-size : 7 pt字体粗细：粗体；文本-锚点：中间；stroke:无；fill:黑色；}/style/head body on load=' updateTime()'！-检视框是坐标系，宽度和高度是指屏幕大小-SVG id=' clock ' viewBox=' 0 0 100 100 '宽度='500 '高度='500' defs！-定义下拉阴影的滤镜-过滤器id='shadow' x='-50%' y='-50% '宽度='200% '高度=' 200% ' fegaussianbull in=' source alpha ' stdDeviation=' 1 '结果=' blur '/feOffset in=' blur ' dx=' 1 ' dy=' 1 '结果=' shadow '/feMerge中的feMerge节点=' source graphic '/feMerge中的节点=' shadow '/feMerge/过滤器/defs圆圈id='face' cx='-钟缅- g id='ticks '！- 12小时的刻度-线x1=' 50 ' y1=' 5.000 ' x2=' 50.00 ' y2=' 10.00 '/线x1=' 72.50 ' y1=' 11.03 ' x2=' 70.00 ' y2=' 15.36 '/线x1=' 88.97 ' y1=' 27.50 ' x2=' 84.64 ' y2=' 30.00 '/线x1='95.00' y1='50 '-标记重要的几个刻度值-text x=' 50 ' y=' 18 ' 12/text x=' 85 ' y=' 53 ' 3/文本文本x=' 50 ' y=' 88 ' 6/文本文本x=' 15 ' y=' 53 ' 9/文本/g！ -初始绘制成竖直的指针，之后通过射流研究…来做旋转- g id='hands '筛选器='url(#shadow)'！-给指针添加阴影-line id='时针' x1=' 50 ' y1=' 50 ' x2=' 50 ' y2=' 25 '/line id=' minuthand ' x1=' 50 ' y1=' 50 ' x2=' 50 ' y2=' 18 '/line id=' secondary ' x1=' 50 ' y1=' 50 ' x2=' 50 ' y2=' 11 '/g/SVG/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。