<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Clock</title>
<meta charset=utf-8 />
<style>
#container{
height: 100%;
width: 100%;
}
#clock {stroke-linecap: round;}
#surface{stroke-width: 5px;}
#hour {stroke-width: 5px;}
#second {stroke-width: 1px;}
#minute{stroke-width: 3px;}
#numbers {font-family: sans-serif; font-size: 80%;}
</style>
<script>
function timerTick() {
with (new Date()) {
var h, m, s; h = 30 * ((getHours() % 12) + getMinutes() / 60);
m = 6 * getMinutes();
s = 6 * getSeconds();
document.getElementById('hour').setAttribute('transform', 'rotate(' + h + ', 50, 50)');
document.getElementById('minute').setAttribute('transform', 'rotate(' + m + ', 50, 50)');
document.getElementById('second').setAttribute('transform', 'rotate(' + s + ', 50, 50)');
setTimeout(timerTick, 1000);
}
}
</script>
</head>
<body onload='timerTick()'>
<table id='container'>
<tr> <td align="center">
<svg id='clock' viewBox='0 0 100 100' width='400' height='400'>
<circle id='surface' cx='50' cy='50' r='47.5' fill="blue" stroke="#000"/>
<!--Its for a clock (sec,min,hour)-->
<g id='pointers'>
<line id='hour' x1='50' y1='50' x2='50' y2='27' stroke="#000" />
<line id='minute' x1='50' y1='50' x2='50' y2='17' stroke="#000"/>
<line id='second' x1='50' y1='50' x2='50' y2='13' stroke="#000"/>
</g>
<!--Its for numbers (3,6,9,12)-->
<g id='numbers'>
<text x="65" y="22">1</text>
<text x="78" y="35">2</text>
<text x='85' y='54'>3</text>
<text x='79' y='73'>4</text>
<text x="65" y="85">5</text>
<text x='47' y='91'>6</text>
<text x="27" y="85">7</text>
<text x='14' y='73'>8</text>
<text x='9' y='57'>9</text>
<text x="12" y="38">10</text>
<text x="27" y="24">11</text>
<text x='43' y='18'>12</text>
</g>
</svg>
</td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment