Круглые часы с секундной стрелкой без использования графики

Идущие часы с секундной стрелкой, для вывода которых не используется графика.

Пример работы скрипта:

 

 
1
2
3
4
5
6
7
8
9
10
11
12
 
.
.
.
.
.
.
.
.
.
.
.
.

 

 

 

 

 

 

 

 

 

Код страницы (сохраните его в файле с расширением html):<html>
<head>
<title>Круглые часы с секундной стрелкой без графики</title>
<script language="JavaScript">
pX = 100;
pY = 100;
obs = new Array(13);
function ob() {
for (i = 0; i < 13; i++) {
if (document.all) obs[i] = new Array (eval('ob'+i).style,-100,-100);
else obs[i] = new Array (eval('document.ob'+i),-100,-100);
}
}
function cl(a, b, c) {
if (document.all) {
if (a != 0) b += -1;
eval('c'+a+'.style.pixelTop='+(pY+(c)));
eval('c'+a+'.style.pixelLeft='+(pX+(b)));
}
else {
if (a != 0) b += 10;
eval('document.c'+a+'.top='+(pY+(c)));
eval('document.c'+a+'.left='+(pX+(b)));
}
}
function runClock() {
for (i = 0; i < 13; i++) {
obs[i][0].left=obs[i][1]+pX;
obs[i][0].top=obs[i][2]+pY;
}
}
var lastsec;
function timer() {
time = new Date ();
sec = time.getSeconds();
if (sec != lastsec) {
lastsec = sec;
sec = Math.PI * sec / 30;
min = Math.PI * time.getMinutes() / 30;
hr = Math.PI * time.getHours() / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
for (i = 1; i < 6; i++) {
obs[i][1] = Math.sin(sec) * (44 - (i-1) * 11) - 16;
if (document.layers)obs[i][1] += 10;
obs[i][2] = -Math.cos(sec) * (44 - (i-1) * 11) - 27;
}
for (i = 6;i < 10; i++) {
obs[i][1] = Math.sin(min) * (40 - (i-6) * 10) - 16;
if (document.layers)obs[i][1] += 10;
obs[i][2] = -Math.cos(min) * (40 - (i-6) * 10) - 27;
}
for (i = 10; i < 13; i++) {
obs[i][1] = Math.sin(hr) * (37 - (i-10) * 11) - 16;
if (document.layers)obs[i][1] += 10;
obs[i][2] = -Math.cos(hr) * (37 - (i-10) * 11) - 27;
}
}
}
function setNum() {
cl (0, -67, -65);
cl (1, 10, -51);
cl (2, 28, -33);
cl (3, 35, -8);
cl (4, 28, 17);
cl (5, 10, 35);
cl (6, -15, 42);
cl (7, -40, 35);
cl (8, -58, 17);
cl (9, -65, -8);
cl (10, -58, -33);
cl (11, -40, -51);
cl (12, -16, -56);
}
function startClock() {
ob();
setNum();
setInterval('timer()', 100);
setInterval('runClock()', 100);
}
</script>
<style>
.num { color:black; width:30px; text-align:center; top: -20px; position: absolute; font: bold 11px courier, arial; }
</style>
</head>
<body onLoad="javascript:startClock();">
<div id="c0" style="Z-INDEX: 2; LEFT: 38px; TOP: 36px" ></div>
<div id="c1" class="num" style="Z-INDEX: 5; LEFT: 170px;">1</div>
<div id="c2" class="num" style="Z-INDEX: 5; LEFT: 170px;">2</div>
<div id="c3" class="num" style="Z-INDEX: 5; LEFT: 170px;">3</div>
<div id="c4" class="num" style="Z-INDEX: 5; LEFT: 170px;">4</div>
<div id="c5" class="num" style="Z-INDEX: 5; LEFT: 170px;">5</div>
<div id="c6" class="num" style="Z-INDEX: 5; LEFT: 170px;">6</div>
<div id="c7" class="num" style="Z-INDEX: 5; LEFT: 170px;">7</div>
<div id="c8" class="num" style="Z-INDEX: 5; LEFT: 170px;">8</div>
<div id="c9" class="num" style="Z-INDEX: 5; LEFT: 170px;">9</div>
<div id="c10" class="num" style="Z-INDEX: 5; LEFT: 170px;">10</div>
<div id="c11" class="num" style="Z-INDEX: 5; LEFT: 170px;">11</div>
<div id="c12" class="num" style="Z-INDEX: 5; LEFT: 170px;">12</div>
<div id="ob0" class="num" style="Z-INDEX: 1; LEFT: -170px;"></div>
<div id="ob1" class="num" style="Z-INDEX: 8; LEFT: -170px; color: #0000ff; font-size: x-large;">.</div>
<div id="ob2" class="num" style="Z-INDEX: 8; LEFT: -170px; color: #0000ff; font-size: x-large;">.</div>
<div id="ob3" class="num" style="Z-INDEX: 8; LEFT: -170px; color: #0000ff; font-size: x-large;">.</div>
<div id="ob4" class="num" style="Z-INDEX: 8; LEFT: -170px; color: #0000ff; font-size: x-large;">.</div>
<div id="ob5" class="num" style="Z-INDEX: 8; LEFT: -170px; color: #0000ff; font-size: x-large;">.</div>
<div id="ob6" class="num" style="Z-INDEX: 7; LEFT: -170px; color: #00ffff; font-size: x-large;">.</div>
<div id="ob7" class="num" style="Z-INDEX: 7; LEFT: -170px; color: #00ffff; font-size: x-large;">.</div>
<div id="ob8" class="num" style="Z-INDEX: 7; LEFT: -170px; color: #00ffff; font-size: x-large;">.</div>
<div id="ob9" class="num" style="Z-INDEX: 7; LEFT: -170px; color: #00ffff; font-size: x-large;">.</div>
<div id="ob10" class="num" style="Z-INDEX: 6; LEFT: -170px; color: #ffff00; font-size: x-large;">.</div>
<div id="ob11" class="num" style="Z-INDEX: 6; LEFT: -170px; color: #ffff00; font-size: x-large;">.</div>
<div id="ob12" class="num" style="Z-INDEX: 6; LEFT: -170px; color: #ffff00; font-size: x-large;">.</div>
</body>
</html>