使用JS操作SVG示例--时钟

来源：互联网发布：wan 微型端口 ip 编辑：程序博客网时间：2024/04/29 20:22
<!doctype html><html lang="en"> <head>  <meta charset="UTF-8"><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>  <title>Document</title> </head> <body><div id="" class=""><span>Open Time : <input type="text" id="time" size="25" /></span><br><br></div><div id="" class="" style="height:500px"><svg style="height:400px;width:400px"  viewBox="-2 -2 402 402" id="svgclock"><circle cx="150" cy="150" r="150" style="fill:rgba(255,255,255,1);stroke:rgb(0,0,0);stroke-width:2"></circle><g style="fill:rgb(0,0,0);font-weight:bold;font-size:1.3em"><text x="137" y="20">12</text><text x="145" y="295">6</text><text x="5" y="158">9</text><text x="285" y="158">3</text></g><g style="fill:rgb(0,0,0);font-weight:bold;font-size:1em"><text x="215" y="35">1</text><text x="267" y="87">2</text><text x="267" y="225">4</text><text x="215" y="278">5</text><text x="75" y="278">7</text><text x="25" y="225">8</text><text x="25" y="90">10</text><text x="75" y="38">11</text></g><circle cx="150" cy="150" r="3" style="fill:rgba(255,255,255,1);stroke:rgb(0,0,0);stroke-width:3"></circle><line id="_hour" x1="150"y1="170" x2="150" y2="80" stroke="rgba(0,0,0,1)" stroke-width="4"><!-- <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 150" to="360 150 150" begin="0s" dur="43200s" repeatCount="indefinite"  />  --></line><line id="_min" x1="150"y1="170" x2="150" y2="40" stroke="rgba(0,0,0,1)" stroke-width="4"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 150" to="360 150 150" begin="0s" dur="3600s" repeatCount="indefinite" /> </line><line id="_sec" x1="150"y1="170" x2="150" y2="40" stroke="red" stroke-width="2"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 150" to="360 150 150" begin="0s" dur="60s" repeatCount="indefinite"  /> <!-- repeatCount="indefinite"  fill="freeze" --></line><rect width="100px" height="20px" x="100" y="220" style="fill:rgba(255,255,255,0);stroke:rgba(0,0,0,1);stroke-width:2px"></rect><text x="105" y="235">2016-11-15</text><circle cx="150" cy="150" r="2" style="fill:rgba(0,0,0,1);stroke:rgb(255,0,0);stroke-width:1"></circle></svg> <script type="text/javascript">  <!--$(document).ready(function(){$("#time").val(new Date());var currentTime, hour, minute, second;currentTime = new Date();second = currentTime.getSeconds();minute = currentTime.getMinutes();hour = currentTime.getHours();hour = (hour > 12)? hour - 12 : hour;hour = (hour == '00')? 12 : hour;var line = document.getElementById("_sec");var fromRotate = second*6;var toRotate = fromRotate+360;line.setAttribute("transform","rotate("+fromRotate+" 150,150)");line.childNodes[1].setAttribute("from",fromRotate+" 150 150");line.childNodes[1].setAttribute("to",toRotate+" 150 150");line = document.getElementById("_min")fromRotate = minute*6 + (second/60)*6;toRotate = fromRotate+360;line.setAttribute("transform","rotate("+fromRotate+" 150,150)");line.childNodes[1].setAttribute("from",fromRotate+" 150 150");line.childNodes[1].setAttribute("to",toRotate+" 150 150");line = document.getElementById("_hour")fromRotate = hour*30 + (minute/60)*30;toRotate = fromRotate+360;line.setAttribute("transform","rotate("+fromRotate+" 150,150)");line.childNodes[1].setAttribute("from",fromRotate+" 150 150");//下标取1是因为换行符也被算作一个nodeline.childNodes[1].setAttribute("to",toRotate+" 150 150");});  //-->  </script></div> </body></html>
0 0