Javascript.RU

Форум

 Учебник Node.JS скринкаст Стандарт языка

Справочник

Discord чат

  
Статьи Тест знаний Аналоги функций PHP

Курсы javascript

  Пользователи Календарь Поиск Сообщения за день Все разделы прочитаны

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.08.2008, 00:42
Профессор
Отправить личное сообщение для SunYang Посмотреть профиль Найти все сообщения от SunYang 		 
Регистрация: 22.02.2008
Сообщений: 189

Ремонт часов))
Здрасте. Сделал стрелочные часы, тока показалось вот мне, что не совсем рационально накодил. Принимаю замечания, предложения...
Посмотреть результат можно туты: 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  // шаг точек стрелки минутной
}
// Прописываем стрелку
...
Ответить с цитированием
  #2 (permalink)  
Старый 07.08.2008, 00:42
Профессор
Отправить личное сообщение для SunYang Посмотреть профиль Найти все сообщения от SunYang 		 
Регистрация: 22.02.2008
Сообщений: 189

ПРОДОЛЖЕНИЕ:
...
x3=Math.round(80 * Math.cos(a) + 500);  // координаты х и у для секунд
y3=Math.round(80 * Math.sin(a) + 300);
x4=Math.round(70 * Math.cos(a2) + 500);  // координаты х и у для минут
y4=Math.round(70 * Math.sin(a2) + 300);
// координаты х и у для минут. Конец
document.all.one.style.top = y3
document.all.one.style.left = x3
document.all.one.style.height = 4   // секундную точку сделаем 4х4
document.all.one.style.width = 4    // секундную точку сделаем 4х4
document.all.two.style.top = y4
document.all.two.style.left = x4
document.all.two.style.height = 4
document.all.two.style.width = 4

}
setInterval(clocks, 1000);
</script>
Последний раз редактировалось SunYang, 07.08.2008 в 00:50.
Ответить с цитированием
  #3 (permalink)  
Старый 07.08.2008, 01:14
‬
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев 		 
Регистрация: 21.02.2008
Сообщений: 1,250

SunYang,
Даже не знаю что сказать. Выглядит неплохо, работает правильно, но код не впечатляет. Хотелось бы посоветовать вам разобраться с DOM, потому что методом document.write и обьектом document.all никто уже не пользуется. Да многие места в вашем коде можно было бы упростить.
Ответить с цитированием
  #4 (permalink)  
Старый 07.08.2008, 02:05
Профессор
Отправить личное сообщение для SunYang Посмотреть профиль Найти все сообщения от SunYang 		 
Регистрация: 22.02.2008
Сообщений: 189

Спасибо. Будем дорабатывать. А насчет document.all - прявычко. Хочу вот еще сделать чеб эти полупрозрачные часы можно было мышкой перемещать в любое место экрана (body броузера). Примерно как в голове держу, завтра буду пробовать... А как и чем можно заменить document.write ?
Последний раз редактировалось SunYang, 07.08.2008 в 02:10.
Ответить с цитированием
  #5 (permalink)  
Старый 07.08.2008, 02:08
Аспирант
Отправить личное сообщение для Виталий Посмотреть профиль Найти все сообщения от Виталий 		 
Регистрация: 20.07.2008
Сообщений: 30

http://spb-nikitin.110mb.com/Clock.html развлекался очень давно =) может пригодится
Ответить с цитированием
  #6 (permalink)  
Старый 07.08.2008, 02:14
Профессор
Отправить личное сообщение для SunYang Посмотреть профиль Найти все сообщения от SunYang 		 
Регистрация: 22.02.2008
Сообщений: 189

Сообщение от Виталий Посмотреть сообщение
http://spb-nikitin.110mb.com/Clock.html развлекался очень давно =) может пригодится
ничесе - шикарно написано. А стрелки как чет не понял реализованны?
Ответить с цитированием
  #7 (permalink)  
Старый 07.08.2008, 03:03
‬
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев 		 
Регистрация: 21.02.2008
Сообщений: 1,250

SunYang,
Это все canvas.
Ответить с цитированием
  #8 (permalink)  
Старый 07.08.2008, 12:18
Аспирант
Отправить личное сообщение для Виталий Посмотреть профиль Найти все сообщения от Виталий 		 
Регистрация: 20.07.2008
Сообщений: 30

Сообщение от SunYang Посмотреть сообщение
ничесе - шикарно написано. А стрелки как чет не понял реализованны?
да - это все канва
Ответить с цитированием
Ответ

« Цикл с двумя переменными? | Проблемка со скриптом »

Опции темы Искать в теме
Искать в теме:

Расширенный поиск



© Илья Кантор, 2007-2021 О проекте - Обратная связь - Архив форума - Вверх