本篇文章为大家展示了使用svg怎么实现一个动态时钟效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
具体内容如下
<!DOCTYPE html> <html> <title>SVG clock</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" > <!-- <link rel="stylesheet" type="text/css" href="canvas.css" rel="external nofollow" media="all" />--> <style type="text/css"> #clock { stroke: #adcd3c; stroke-linecap: round; fill: #f2fddb; } #face { stroke-width: 3px; } #ticks { stroke-width: 2px; } #hands line { stroke-linejoin: bevel; } #hourhand { stroke-width: 4px; } #minutehand { stroke-width: 3px; } #numbers { font-size: 16px; text-anchor: middle; stroke: none; fill: #92b0dd; } </style> <script type="text/javascript"> function updateTime() { var now = new Date(); var second = now.getSeconds(); var min = now.getMinutes(); var hour = (now.getHours() % 12) + min / 60; var secondangle = second * 6; //6 degrees for every minute var minangle = min * 6; //6 degrees for every minute var hourangle = hour * 30; //30 degrees for every hour var minhand = document.getElementById('minutehand'); var hourhand = document.getElementById('hourhand'); var secondhand = document.getElementById('secondhand'); var shadhand = document.getElementById("shadow"); var clocks = document.getElementById("clock"); if(second%2==0){ //alert(clocks); clocks.style.stroke="#adcd3c"; }else{ //alert(secondangle); clocks.style.stroke="#ad223c"; } minhand.setAttribute('transform', 'rotate(' + minangle + ', 50, 50)'); hourhand.setAttribute('transform', 'rotate(' + hourangle + ', 50, 50)'); secondhand.setAttribute('transform', 'rotate(' + secondangle + ', 50, 50)'); for (var i = shadhand.childElementCount - 1; i >= 0; i--) { var chr = shadhand.children[i]; switch (chr.tagName) { case "feGaussianBlur": /*if(secondangle/2)==1){ chr.setAttribute(dx=-1) }else{ chr.setAttribute(dx=1) } alert(chr.tagName);*/ break; case "feOffset": if(second%2==0){ //alert(secondangle); chr.setAttribute("dx","-3"); }else{ //alert(secondangle); chr.setAttribute("dx","3"); } //alert(chr.tagName); break; case "feMerge": /*for (var i = 0; i < chr.childElementCount -1; i++) { chr.children[i]. };*/ //alert(chr.tagName); break; default: alert("could not found the Attribute"); } }; setTimeout(updateTime, 1000); //update time for every second } </script> <body onload="updateTime()"> <svg id="clock" viewBox="0 0 100 100" width="500" height="500"> <defs> <!-- define an filter use to add shadow of some element --> <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%"> <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" /> <feOffset in="blur" dx="-1" dy="1" result="shadow" lighting-color = "#adcd3c"/> <feMerge> <feMergeNode in="SourceGraphic"/> <feMergeNode in="shadow" /> </feMerge> </filter> </defs> <!-- clock face --> <circle id="face" cx="50" cy="50" r="45" /> <!-- mark time lines --> <g id="ticks"> <line x1="50.00" 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.90" 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.90" 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.00" x2="30.00" y2="15.36" /> </g> <!-- mark some important numbers --> <g id="numbers"> <text x="50" y="20">12</text> <text x="85" y="55">3</text> <text x="50" y="88">6</text> <text x="15" y="55">9</text> </g> <!-- show hands --> <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" /> <line id="secondhand" x1="50" y1="50" x2="50" y2="16" /> </g> </svg> </body> </html>
上述内容就是使用svg怎么实现一个动态时钟效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
