本文实例为大家分享了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时钟特效专题
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,SVG,时钟
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无争山庄资源网 Copyright www.whwtcm.com
暂无“js+SVG实现动态时钟效果”评论...
更新日志
2024年09月20日
2024年09月20日
- 战锤40K星际战士2狙击职业介绍|狙击职业技能效果一览
- RobertSaxtonTheResurrectionoftheSoldiers(2024)[24Bit-192kHz]FLAC
- 唐成杨东哥弹唱《情若真HQ》头版限量编号[WAV+CUE]
- 柏菲·HIFI风情1《一杯香茶》限量开盘母带ORMCD[WAV+CUE]
- 发糖了!《黑神话》动画导演绘制八戒紫蛛儿中秋贺图
- “时光系列”新作《时光3:永耀之境》首曝:画风更真实的恋爱模拟RPG
- 《战地》游戏主管:始终认为《战地》未来销量能超越《使命召唤》
- 《伤感民谣 值得收藏的音乐极品 2CD》[WAV/分轨][1.2GB]
- 《邓紫棋 巨肺唱将小天后有心人 2CD》[WAV/分轨][1.2GB]
- 《迪克牛仔 坛奇精选 2CD台首版》 [WAV+CUE][600MB]
- 陈明.1998-为了爱影视歌曲+新歌【中唱】【WAV+CUE】
- 黄小琥.2009-简单/不简单【华纳】【WAV+CUE】
- 洪卓立.2010-TASTE.OF.LOVE新曲+精丫英皇娱乐】【WAV+CUE】
- 战锤40K星际战士2职业强度排行
- 交错战线PVE国家队成员以及常用角色推荐