Войти

Показать полную графическую версию : [решено] Часы на JavaScript - модернизация скрипта


Kosiak
15-11-2007, 19:18
http://kimry.net/clock.ZIP

Тут небольшой скриптик электронных часов. Скачал я его из какого-то хранилища скриптов (авторства не знаю).

Как его не крутил, не смог сделать так, чтобы циферки (графические изображения) брались из заданной мною папки (по-умолчанию они берутся из папки, где лежит скипт).

Вот. И ещё, часики не запускаются пока страница полностью не загрузится. Это приводит к тому, что на тяжёлых страницах часики выглядят не совсем корректно: циферок не видно, но горят две точки (разделитель часов:минут). С этим что-то нужно сделать. Либо чтоб часов не было видно совсем, пока всё не загрузится, либо чтоб разделитель выглядел как потухший, как и циферки. Либо сделать так, чтоб часы запускальсь сразу как загрузятся сами, не дожидаясь загрузки всей страницы.

Надеюсь на вашу помощь - сам не осилил

Sham
15-11-2007, 22:29
Kosiak,
1. c1.src="папка/c1.gif" // и везде к .src так добавить...
2. убери с тега body аттрибут OnLoad="show3()" и добавь show3(); в самый конец скрипта (перед </Script>)

Kosiak
16-11-2007, 00:14
Sham, спасибо, с путями получилось, хотя и не совсем так однозначно.
А вот с советом №2 трабла. Если из тега body аттрибут OnLoad="show3()" убрать часики совсем не отображаются (точнее не идут, как-будто не загрузились совсем), пробовал добавлять в конец скрипта - результат один. Опишите подробней, как это сделать...

Sham
16-11-2007, 01:19
Kosiak, сори, насчет второго я неправ...

В общем так: часики запускаются в том месте, где указан show3(). <body onload... означало, что запуск произойдет после загрузки страницы целиком... чтобы этого не дожидаться, необходимо поместить show3() после нужных нам тегов img. Вот так (в теге script):
<img src="cb.gif" name="a"><img src="cb.gif" name="b"><img src="colon.gif" name="c"><img src="cb.gif" name="d"><img src="cb.gif" name="e"><img src="colon.gif" name="f"><img src="cb.gif" name="g"><img src="cb.gif" name="h"><img src="cam.gif" name="j">
<!-- вот тут запускаем -->
<script>show3();</script>
думаю, что первоначально не все картинки-циферки будут видны, особенно на медленном соединении...

Kosiak
16-11-2007, 08:11
Спасибо!
А чтобы сначала прогрузились все цифры, а только потом появились часики как сделать (чтоб часы не разорвало, если скорость будет низкая)?

Sham
17-11-2007, 04:06
Kosiak, добавьте функцию в список...
function test()
{
if (cpm.complete&&cam.complete/* и т.д.*/)
{
window.clearInterval(id);
document.getElementById('clock').style.display='';
show3();
}
}
и делаем изменения в HTML:
<span id="clock" style="display:none">
<img src="cb.gif" name="a"><img src="cb.gif" name="b"><img src="colon.gif" name="c"><img src="cb.gif" name="d"><img src="cb.gif" name="e"><img src="colon.gif" name="f"><img src="cb.gif" name="g"><img src="cb.gif" name="h"><img src="cam.gif" name="j">
</span>
<script>var id=window.setInterval(test,300);</script>
тестируйте... :)

Kosiak
18-11-2007, 16:51
Не совсем понял, как и куда добавить эту функцию...

И ещё вопросик: можно ли как-нибудь переделать часики в 24часовой формат?

Sham
19-11-2007, 00:48
как и куда добавить эту функцию... »
туда, где все функции, копи-пастом :)можно ли как-нибудь переделать часики в 24часовой формат? »
можно 100%... дорогу осилит идущий :)

Kosiak
20-11-2007, 20:23
можно 100%... дорогу осилит идущий » Это как? ;)

Попробовал на реальных условиях вроде всё нормально работает и без изысков...

Sham
21-11-2007, 00:54
Это как? »
Вообще принято так: вы предлагаете свое решение и говорите, что где-то ошибка, а форумский народ пытается направить Вас на путь истинный...

Kosiak
22-11-2007, 21:03
Sham, ну я слабо в JS разбираюсь. Хоть намекните где искать... :dont-know

Sham
23-11-2007, 01:05
Kosiak, пробуйте удалить только эти строки
dn="AM"
if ((hours>=12)&&(minutes>=1)||(hours>=13))
{dn="PM"
hours=hours-12}
if (hours==0)
hours=12
if (dn=="AM") document.j.src=cam.src
else document.images.j.src=cpm.src
<img src="cam.gif" name="j">

Kosiak
27-11-2007, 23:50
Sham, к сожалению так не получилось...

Получилось (вроде бы) так. В коде:
dn="AM" if ((hours>=12)&&(minutes>=1)||(hours>=13)) {dn="PM" hours=hours-12} if (hours==0) hours=12 hours=hours-12 заменяем на hours=hours-0

и удаляем:

<img src="cam.gif" name="j">

Не знаю на сколько это правильно но в данный момент работает (показывает 23:50)

Kosiak
28-11-2007, 00:28
После нуля часов почему-то получилось 12. Как исправить, чтобы стало 00?

Kosiak
28-11-2007, 19:33
Кстати, часы неправильное время показывали только 1 час, с часу ночи стали показывать верно.

Sham
28-11-2007, 21:39
к сожалению так не получилось... »
все работает, удаляйте внимательно, чтобы ничего лишнего (там небось скобку случайно удалили "}" в конце первого кода).

Kosiak
06-12-2007, 02:54
Вот, что в итоге получилось и не работает:
var dn
c1=new Image(); c1.src="style_images/ut_lime/Clock/c1.gif"
c2=new Image(); c2.src="style_images/ut_lime/Clock/c2.gif"
c3=new Image(); c3.src="style_images/ut_lime/Clock/c3.gif"
c4=new Image(); c4.src="style_images/ut_lime/Clock/c4.gif"
c5=new Image(); c5.src="style_images/ut_lime/Clock/c5.gif"
c6=new Image(); c6.src="style_images/ut_lime/Clock/c6.gif"
c7=new Image(); c7.src="style_images/ut_lime/Clock/c7.gif"
c8=new Image(); c8.src="style_images/ut_lime/Clock/c8.gif"
c9=new Image(); c9.src="style_images/ut_lime/Clock/c9.gif"
c0=new Image(); c0.src="style_images/ut_lime/Clock/c0.gif"
cb=new Image(); cb.src="style_images/ut_lime/Clock/cb.gif"
cam=new Image(); cam.src="style_images/ut_lime/Clock/cam.gif"
cpm=new Image(); cpm.src="style_images/ut_lime/Clock/cpm.gif"
function extract(h,m,s,type)
{if (!document.images)
return
if (h<=9)
{document.images.a.src=cb.src
document.images.b.src=eval("c"+h+".src")}
else
{document.images.a.src=eval("c"+Math.floor(h/10)+".src")
document.images.b.src=eval("c"+(h%10)+".src")}
if (m<=9)
{document.images.d.src=c0.src
document.images.e.src=eval("c"+m+".src")}
else
{document.images.d.src=eval("c"+Math.floor(m/10)+".src")
document.images.e.src=eval("c"+(m%10)+".src")}
if (s<=9)
{document.g.src=c0.src
document.images.h.src=eval("c"+s+".src")}
else
{document.images.g.src=eval("c"+Math.floor(s/10)+".src")
document.images.h.src=eval("c"+(s%10)+".src")}
}
function show3()
{if (!document.images)
return
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
}
Часы после удаления строк вообще перестали отображаться... :(

Sham
06-12-2007, 12:45
Kosiak, закомментированные строки - удаляются...<script language="JavaScript1.1">
var dn
c1=new Image(); c1.src="c1.gif"
c2=new Image(); c2.src="c2.gif"
c3=new Image(); c3.src="c3.gif"
c4=new Image(); c4.src="c4.gif"
c5=new Image(); c5.src="c5.gif"
c6=new Image(); c6.src="c6.gif"
c7=new Image(); c7.src="c7.gif"
c8=new Image(); c8.src="c8.gif"
c9=new Image(); c9.src="c9.gif"
c0=new Image(); c0.src="c0.gif"
cb=new Image(); cb.src="cb.gif"
cam=new Image(); cam.src="cam.gif"
cpm=new Image(); cpm.src="cpm.gif"

function test()
{
if (cpm.complete&&cam.complete/* и т.д.*/)
{
window.clearInterval(id);
document.getElementById('clock').style.display='';
show3();
}
}

function extract(h,m,s,type)
{if (!document.images)
return
if (h<=9)
{document.images.a.src=cb.src
document.images.b.src=eval("c"+h+".src")}
else
{document.images.a.src=eval("c"+Math.floor(h/10)+".src")
document.images.b.src=eval("c"+(h%10)+".src")}
if (m<=9)
{document.images.d.src=c0.src
document.images.e.src=eval("c"+m+".src")}
else
{document.images.d.src=eval("c"+Math.floor(m/10)+".src")
document.images.e.src=eval("c"+(m%10)+".src")}
if (s<=9)
{document.g.src=c0.src
document.images.h.src=eval("c"+s+".src")}
else
{document.images.g.src=eval("c"+Math.floor(s/10)+".src")
document.images.h.src=eval("c"+(s%10)+".src")}
// if (dn=="AM") document.j.src=cam.src
// else document.images.j.src=cpm.src
}
function show3()
{if (!document.images)
return
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
/* dn="AM"
if ((hours>=12)&&(minutes>=1)||(hours>=13))
{dn="PM"
hours=hours-12}
if (hours==0)
hours=12*/
extract(hours,minutes,seconds,dn)
setTimeout("show3()",1000)}
</script>

Kosiak
07-12-2007, 18:49
Спасибо! Вроде всё работает :)




© OSzone.net 2001-2012