Simplest analog clock (CSS, SVG, JavaScript).
HTML, 93 lines
Download
Copy to clipboard1 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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | <!DOCTYPE html>
<html lang="en-US">
<head>
<title>Clock</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
background-color: #eee;
font-family: tahoma;
font-size: 90%;
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
}
td {
text-align: center;
}
#box {
background-color: #cc0000;
color: #fff;
font-weight: bold;
text-align: center;
padding: 3px 0 3px 0;
}
#container {
height: 100%;
vertical-align: middle;
width: 100%;
}
#clock {
fill: #cc55fa;
stroke: #000;
stroke-linecap: round;
}
#surface, #h_pointer {
stroke-width: 5px;
}
#delimiters, #s_pointer {
stroke-width: 1px;
}
#m_pointer {
stroke-width: 3px;
}
#numbers {
font-family: sans-serif;
font-size: 80%;
}
</style>
<script language="javascript" type="text/javascript">
function timerTick() {
with (new Date()) {
var h, m, s;
h = 30 * ((getHours() % 12) + getMinutes() / 60);
m = 6 * getMinutes();
s = 6 * getSeconds();
document.getElementById('h_pointer').setAttribute('transform', 'rotate(' + h + ', 50, 50)');
document.getElementById('m_pointer').setAttribute('transform', 'rotate(' + m + ', 50, 50)');
document.getElementById('s_pointer').setAttribute('transform', 'rotate(' + s + ', 50, 50)');
setTimeout(timerTick, 1000);
}
}
</script>
</head>
<body onload='timerTick()'>
<noscript><div id='box'>Please, enable JavaScript and refresh page.</div></noscript>
<table id='container'>
<tr>
<td>
<svg id='clock' viewBox='0 0 100 100' width='200' height='200'>
<circle id='surface' cx='50' cy='50' r='45'/>
<g id='pointers'>
<line id='h_pointer' x1='50' y1='50' x2='50' y2='27' />
<line id='m_pointer' x1='50' y1='50' x2='50' y2='17' />
<line id='s_pointer' x1='50' y1='50' x2='50' y2='13' />
</g>
<g id='numbers'>
<text x='43' y='18'>12</text>
<text x='85' y='54'>3</text>
<text x='47' y='91'>6</text>
<text x='9' y='54'>9</text>
</g>
</svg>
</td>
</tr>
</table>
</body>
</html>
|
Brilliant coding! After I blocked the time interval l tried to randomise the variables h, m and s to produce a random resettable static time on the clock face by a button click which would ask a random set of questions relating to time. I teach English as a foreign language on an intranet basis. This would save me an immense amount of two way email or chat messages. I look forward to help on this please. jacobi
I've created this clock: https://github.com/LsHallo/analog_clock Maybe it suits your situation. If i hear back from you i'm open to develop if further!