Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)
-   -   [решено] Часы на JavaScript - модернизация скрипта (http://forum.oszone.net/showthread.php?t=94212)

Kosiak 15-11-2007 19:18 679412
Часы на JavaScript - модернизация скрипта
 
http://kimry.net/clock.ZIP

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

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

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

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

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

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

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

В общем так: часики запускаются в том месте, где указан show3(). <body onload... означало, что запуск произойдет после загрузки страницы целиком... чтобы этого не дожидаться, необходимо поместить show3() после нужных нам тегов img. Вот так (в теге script):
HTML код:
<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 679657
Спасибо!
А чтобы сначала прогрузились все цифры, а только потом появились часики как сделать (чтоб часы не разорвало, если скорость будет низкая)?

Sham 17-11-2007 04:06 680167
Kosiak, добавьте функцию в список...
Код:
function test()
{
  if (cpm.complete&&cam.complete/* и т.д.*/)
  {
    window.clearInterval(id);
    document.getElementById('clock').style.display='';
    show3();
  }
}
и делаем изменения в HTML:
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 680940
Не совсем понял, как и куда добавить эту функцию...

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

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

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

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

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

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

Sham 23-11-2007 01:05 683702
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
HTML код:
<img src="cam.gif" name="j">

Kosiak 27-11-2007 23:50 686363
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 686370
После нуля часов почему-то получилось 12. Как исправить, чтобы стало 00?

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

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

Kosiak 06-12-2007 02:54 691494
Вот, что в итоге получилось и не работает:
HTML код:
  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 691745
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 692864
Спасибо! Вроде всё работает :)


Время: 23:22.

Время: 23:22.
© OSzone.net 2001-