JavaScript+svg绘制的一个动态时钟
Posted newAdmin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript+svg绘制的一个动态时钟相关的知识，希望对你有一定的参考价值。
结果图：
代码如下：
<!DOCTYPE html> <html> <head> <title>动态时钟</title> </head> <body onload="updateTime();"> <script type="text/javascript"> function updateTime(){ //更新svg时钟来显示当前时间 var now =new Date(); //当前时间 var min = now.getMinutes(); //分钟 var hour = (now.getHours()%12)+min/60;//装换成可以在时钟上表示的时间 var minangle = min*6; //每6度表示一分钟 var hourangle = hour*30; //每30度表示一个小时 //获取表示时钟时针和分针的svg元素 var minhand = document.getElementById(\'minutehand\'); var hourhand = document.getElementById(\'hourhand\'); //设置这些元素的svg属性，将他们移动到中面上 minhand.setAttribute("transform","rotate("+minangle+",50,50)"); hourhand.setAttribute("transform","rotate("+hourangle+",50,50)"); //每一分钟更新下时钟显示时间 setTimeout(updateTime,60000); } </script> <style type="text/css"> #clock{ /*用于时钟的全局样式*/ stroke:black; /*黑线*/ stroke-linecap: round; /*圆角*/ fill:#eef; /*以浅蓝灰色为背景*/ } #face {stroke-width:3px;} /*时钟的外边框*/ #ticks{stroke-width:2;} /*标记每个小时的线段*/ #hourhand {stroke-width:5px;} /*相对较粗的时针*/ #minutehand{stroke-width:3px;} /*相对较细的分针*/ #numbers{ font-family: sans-serif; font-size: 7pt; font-weight: bold; text-anchor: middle; stroke:none; fill:black; } </style> <!-- 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="SourceGrahic"/> <feMergeNode in="shadow"/> </feMerge> </filter> </defs> <circle id="face" cx="50" cy="50" r="45"/> <!-- 钟面 --> <g id="ticks"> <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.970" 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> <!-- 初始绘制成竖直的指针，之后通过JavaScript代码来做旋转 --> <g id="hands" filter="url(#shadow)"> <!-- 给指针添加阴影 --> <line id="hourhand" x1="50" y1="50" x2="50" y2="24"/> <line id="minutehand" x1="50" y1="50" x2="50" y2="20"/> </g> </svg> </body> </html>
以上是关于JavaScript+svg绘制的一个动态时钟的主要内容，如果未能解决你的问题，请参考以下文章