<!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是因为换行符也被算作一个node
line.childNodes[1].setAttribute("to",toRotate+" 150 150");
});
//-->
</script>
</div>
</body>
</html>
1583
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
