blob: 906f1303544ae3ff95816c68f9e82d4848d72c35 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="200px" height="280px">
<g transform="translate(100,100) rotate(-90)">
<circle r="100" fill="white" strok="black" stroke-width="2px"/>
<g style="stroke-linecap: round; stroke: black; stroke-width: 2px;">
<line x1="100" y1="0" x2="90" y2="0" />
<line x1="87" y1="50" x2="78" y2="45" />
<line x1="50" y1="87" x2="45" y2="78" />
<line x1="0" y1="100" x2="0" y2="90" />
<line x1="-50" y1="87" x2="-45" y2="78" />
<line x1="-87" y1="50" x2="-78" y2="45" />
<line x1="-100" y1="0" x2="-90" y2="0" />
<line x1="-87" y1="-50" x2="-78" y2="-45"/>
<line x1="-50" y1="-87" x2="-45" y2="-78"/>
<line x1="0" y1="-100" x2="0" y2="-90"/>
<line x1="50" y1="-87" x2="45" y2="-78"/>
<line x1="87" y1="-50" x2="78" y2="-45"/>
<line id="hourhand" stroke-width="8px" stroke="blue" x1="0" y1="0" x2="0" y2="40"/>
<line id="minutehand" stroke-width="5px" stroke="green" x1="0" y1="0" x2="0" y2="65"/>
<line id="secondhand" stroke-width="2px" stroke="red" x1="0" y1="0" x2="0" y2="90"/>
</g>
</g>
<text id="datetext" x="10" y="250">test</text>
<script type="text/javascript">
var sHand = document.getElementById('secondhand');
var mHand = document.getElementById('minutehand');
var hHand = document.getElementById('hourhand');
var digital = document.getElementById('datetext');
function updateSeconds() {
var angle = (new Date()).getSeconds() * Math.PI/30;
if (angle == 0)
updateMinutes();
sHand.setAttribute('x2', 90 * Math.cos(angle));
sHand.setAttribute('y2', 90 * Math.sin(angle));
var d = (new Date()).toUTCString();
digital.firstChild.data = d;
}
function updateMinutes() {
var angle = (new Date()).getMinutes() * Math.PI/30;
if (angle == 0)
updateHours();
mHand.setAttribute('x2', 65 * Math.cos(angle));
mHand.setAttribute('y2', 65 * Math.sin(angle));
}
function updateHours() {
var angle = (new Date()).getHours() * Math.PI/6;
hHand.setAttribute('x2', 40 * Math.cos(angle));
hHand.setAttribute('y2', 40 * Math.sin(angle));
}
updateSeconds();
updateMinutes();
updateHours();
setInterval('updateSeconds()', 1000);
</script>
</svg>
|
