You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.3 KiB
67 lines
2.3 KiB
15 years ago
|
<?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>
|