Здрасте. Сделал стрелочные часы, тока показалось вот мне, что не совсем рационально накодил. Принимаю замечания, предложения...
Посмотреть результат можно туты:
http://www.azumyt.ru/myclocks.html
Вот исходники:
<script>
R_second = 80 // радиус секундной стрелки
R_minute = 70 // радиус минутной стрелки
R_hour = 60 // радиус часовой стрелки
x=500; // Начальне координаты
y=300; // Начальне координаты
x2=500; // x2 = x
y2=220; // y2 = y - R_second
x4=500; // x4 = x
y4=230; // y4 = y - R_minute
x7=500; // x4 = x
y7=240; // y7 = y - R_hour
img_x = x-100;
img_y = y-100;
document.write('<img src="body_clock.gif" style="position:absolute; top:'+img_y+'px; left:'+img_x+'px; opacity:0.7; filter:alpha(opacity:70);"/>')
document.write('<img src="point.png" style="position:absolute; top:'+y+'px; left:'+x+'px;" height="2" width="2" />') // Center okrugnocti
document.write('<img id="one" src="point.png" style="position:absolute; top:'+y2+'px; left:'+x2+'px;" height="1" width="1" />') /* Секундная To4ka, kotoraya dvigaetsya*/
document.write('<img id="two" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />') /*Минутная точка, которая двигается*/
document.write('<img id="tree" src="hours.png" style="position:absolute; top:'+y7+'px; left:'+x7+'px;" height="1" width="1" />') /*часовая точка, которая двигается*/
//стрелка минутная
document.write('<img id="0" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />')
document.write('<img id="1" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />')
document.write('<img id="2" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />')
document.write('<img id="3" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />')
document.write('<img id="4" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />')
document.write('<img id="5" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />')
document.write('<img id="6" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />')
document.write('<img id="7" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />')
document.write('<img id="8" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />')
document.write('<img id="9" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />')
document.write('<img id="10" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />')
document.write('<img id="11" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />')
document.write('<img id="12" src="minutes.png" style="position:absolute; top:'+y4+'px; left:'+x4+'px;" height="1" width="1" />')
//стрелка минутная
//стрелка часовая
document.write('<img id="13" src="hours.png" style="position:absolute; top:'+y7+'px; left:'+x7+'px;" height="1" width="1" />')
document.write('<img id="14" src="hours.png" style="position:absolute; top:'+y7+'px; left:'+x7+'px;" height="1" width="1" />')
document.write('<img id="15" src="hours.png" style="position:absolute; top:'+y7+'px; left:'+x7+'px;" height="1" width="1" />')
document.write('<img id="16" src="hours.png" style="position:absolute; top:'+y7+'px; left:'+x7+'px;" height="1" width="1" />')
document.write('<img id="17" src="hours.png" style="position:absolute; top:'+y7+'px; left:'+x7+'px;" height="1" width="1" />')
document.write('<img id="18" src="hours.png" style="position:absolute; top:'+y7+'px; left:'+x7+'px;" height="1" width="1" />')
document.write('<img id="19" src="hours.png" style="position:absolute; top:'+y7+'px; left:'+x7+'px;" height="1" width="1" />')
document.write('<img id="20" src="hours.png" style="position:absolute; top:'+y7+'px; left:'+x7+'px;" height="1" width="1" />')
document.write('<img id="21" src="hours.png" style="position:absolute; top:'+y7+'px; left:'+x7+'px;" height="1" width="1" />')
document.write('<img id="22" src="hours.png" style="position:absolute; top:'+y7+'px; left:'+x7+'px;" height="1" width="1" />')
document.write('<img id="23" src="hours.png" style="position:absolute; top:'+y7+'px; left:'+x7+'px;" height="1" width="1" />')
//стрелка часовая
// Секундная Okrugnost с malenkini to4kami
for(i=6; i<=360; i=i+6) {
znam_1 = 360/i;
ugol = 2*Math.PI/znam_1
x3=Math.round(80 * Math.cos(ugol) + 500);
y3=Math.round(80 * Math.sin(ugol) + 300);
document.write('<img src="point.png" style="position:absolute; top:'+y3+'px; left:'+x3+'px;" height="1" width="1" />')
if(i==30||i==60||i==90||i==120||i==150||i==180||i==210||i==240||i==270||i==300||i==330||i==360) {
document.write('<img src="point.png" style="position:absolute; top:'+y3+'px; left:'+x3+'px;" height="2" width="2" />')
}
}
// Секундная Okrugnost с malenkini to4kami
// Минутная Okrugnost с malenkini to4kami
for(m=6; m<=360; m=m+6) {
znam_2 = 360/m;
ugol2 = 2*Math.PI/znam_2
x5=Math.round(70 * Math.cos(ugol2) + 500);
y5=Math.round(70 * Math.sin(ugol2) + 300);
document.write('<img src="minutes.png" style="position:absolute; top:'+y5+'px; left:'+x5+'px;" height="1" width="1" />')
if(m==90||m==180||m==270||m==360) {
document.write('<img src="minutes.png" style="position:absolute; top:'+y5+'px; left:'+x5+'px;" height="2" width="2" />')
}
}
// Минутная Okrugnost с malenkini to4kami
// часовая Okrugnost с malenkini to4kami
for(vv=6; vv<=360; vv=vv+6) {
znam_4 = 360/vv;
ugol2 = 2*Math.PI/znam_4
x6=Math.round(60 * Math.cos(ugol2) + 500);
y6=Math.round(60 * Math.sin(ugol2) + 300);
document.write('<img src="hours.png" style="position:absolute; top:'+y6+'px; left:'+x6+'px;" height="1" width="1" />')
if(vv==30||vv==60||vv==90||vv==120||vv==150||vv==180||vv==210||vv==240||vv==270||vv==300||vv==330||vv==360) {
document.write('<img src="hours.png" style="position:absolute; top:'+y6+'px; left:'+x6+'px;" height="2" width="2" />')
}
}
// часовая Okrugnost с malenkini to4kami. конец
// массив соответствия секунд (минут) градусам
aas=6
secondArr = []
secondArr[0] = 270; // Нулевая секунда равна 270 градусам
secondArr[1] = 276;
secondArr[2] = 282;
secondArr[3] = 288;
secondArr[4] = 294;
secondArr[5] = 300;
secondArr[6] = 306;
secondArr[7] = 312;
secondArr[8] = 318;
secondArr[9] = 324;
secondArr[10] = 330;
secondArr[11] = 336;
secondArr[12] = 342;
secondArr[13] = 348;
secondArr[14] = 354;
secondArr[15] = 360; // sin и cos 360 и 0 градусов совпадают
for(n=16; n<60; n++) { // создаем массив соответствия секундам градусов
secondArr[n] = aas
aas = aas+6 // secondArr[16] = 6
}
// массив соответствия секунд (минут) градусам. конец
// ЧАСОВАЯ ТОЧКА
// массив соответствия полному часу градусам
hour = []
hour[0] = 270
hour[1] = 300
hour[2] = 330
hour[3] = 360
ax=30
for(u=4; u<24; u++) {
hour[u] = ax;
ax=ax+30;
if(u==16) {
ax=30
hour[u]=ax
ax=ax+30
}
}
// массив соответствия полному часу градусам. конец
// массив дополнительных градусов минут к часам
minutes_hour = []
dx = 0.5
minutes_hour[0] = 30
for(h=1; h<60; h++) {
minutes_hour[h] = dx
dx = dx+0.5
}
// массив дополнительных градусов минут к часам. конец
function clocks_hour() { // Функция движения точек часов
obj_time = new Date()
hour_time = obj_time.getHours()
hour_minutes = obj_time.getMinutes()
gradus_hour=hour[hour_time] // расчет градуса полного часа
znam_6 = 360/gradus_hour
a4 = 2*Math.PI/znam_6
gradus_minute = minutes_hour[hour_minutes] // расчет градуса дополнительного часа, зависищего от количества секунд
znam_7 = 360/gradus_minute
a5 = 2*Math.PI/znam_7
// Прописываем часовую стрелку
r=5; // шаг точек стрелки часовой
for(xx=13; xx<=23; xx++) { // xx = 12, т.к. в 60 точках радиуса часовой стрелки 12 раз с шагом по 5
ma = xx+""
var myPoint = document.getElementById(ma)
x_st=Math.round(r * Math.cos(a4+a5) + 500);
y_st=Math.round(r * Math.sin(a4+a5) + 300);
myPoint.style.left = x_st;
myPoint.style.top = y_st;
r=r+5 // шаг точек стрелки часовой
}
// Прописываем часовую стрелку
x4=Math.round(60 * Math.cos(a4+a5) + 500); // координаты х и у для часа
y4=Math.round(60 * Math.sin(a4+a5) + 300);
document.all.tree.style.top = y4
document.all.tree.style.left = x4
document.all.tree.style.height = 4
document.all.tree.style.width = 4
}
setInterval(clocks_hour, 1000);
// ЧАСОВАЯ ТОЧКА. конец
// Секундная и минутная стрелка
function clocks() { // Функция движения точек секунд, минут
obj_time = new Date()
second = obj_time.getSeconds()
minutes = obj_time.getMinutes()
b=secondArr[second] // забиваем в b значение из массива secondArr[] соответствующее текущей секунде. b - это градус
znam = 360/b
a = 2*Math.PI/znam
min_grad = secondArr[minutes]
znam_3 = 360/min_grad
a2 = 2*Math.PI/znam_3 // угол альфа для минут
// Прописываем стрелку
s=5; // шаг точек стрелки минутной
for(q=0; q<=12; q++) { // q = 14, т.к. в 70 точках радиуса минутной стрелки 14 раз с шагом по 5
am = q+""
var myPoint1 = document.getElementById(am)
x_st1=Math.round(s * Math.cos(a2) + 500);
y_st1=Math.round(s * Math.sin(a2) + 300);
myPoint1.style.left = x_st1;
myPoint1.style.top = y_st1;
s=s+5 // шаг точек стрелки минутной
}
// Прописываем стрелку
...