Часики на js

Часики на js

Aвтор:this
Дата: 09.02.2006
Просмотров: 98197
реализации(javascript: 2шт...) +добавить

Текстовые, простые часы
Все реализации

Текстовые, простые часы

По-другому: "электронные" часы на сайте. Выглядит примерно следующим образом:
Текущее время:

Делается следущим образом:

Создаем на странице элемент, в котором будет выводится значение времени. Это может быть span, div, p - в общем случае любой html элемент документа, отображаемое содержимое которого можно модифицировать.
Создаем функцию, которая при запуске получает текущие количество часов, минут и секунд, формирует из этого требуемое представление текущего времени и сохраняет это в значение элемента, созданного в п.1.
В конце этой функции размещаем setTimeout, указывая в параметрах имя нашей фукнции и интервал вызова - секунду. Т.е.: setTimeout('GetCurrTimeFunc()',1000)
После этого делаем один единственный вызов этой функции где-нибудь в документе(или в onLoad() у body как вариант).

В результате этот один единственный вызов фукнции - отработает, запишет полученное время в элемент, и в конце запустит setTimeout, который начиная с этого момента будет периодически вызывать эту же нашу функцию с интервалов в 1000 миллисекунд, что приведет к тому, что наши часики начнут перерисовываться раз в секунду, каждый раз обновлясь с учетом прошедшей секунды. Что и требовалось.

Реализации:

javascript(2), php(1) +добавить

1) Текстовые, простые часики работающие в IE, Opera, NN, Mozilla, FF на javascript, code #94[автор:this]

Простые электронные текстовые часики на сайте, работающие в IE, Opera, NN, Mozilla, FF ссылка |режим:

<script type="text/javascript">
var d=document
var NN = d.layers ? true : (window.opera && !d.createComment) ? true:false
function showTime(){
  var tmN = new Date()
  var dH = '' + tmN.getHours();   dH =dH.length<2 ? '0' + dH:dH
  var dM = '' + tmN.getMinutes(); dM =dM.length<2 ? '0' + dM:dM
  var dS = '' + tmN.getSeconds(); dS =dS.length<2 ? '0' + dS:dS
  var tmp = dH + ':' + dM + ':' + dS
  if (NN) d.F.chas.value = tmp;
  else    d.getElementById('tm').innerHTML=tmp
 
  // Включаем периодический "перезапуск" этой же функции
  var t = setTimeout('showTime()',1000)
}
</script>
<div id=tm><form name="F"><input type="button" name="chas" value="XX:XX:XX"></form></div>
<script type="text/javascript">showTime()</script>

<script type="text/javascript">
var d=document
var NN = d.layers ? true : (window.opera && !d.createComment) ? true:false
function showTime(){
  var tmN = new Date()
  var dH = '' + tmN.getHours();   dH =dH.length<2 ? '0' + dH:dH
  var dM = '' + tmN.getMinutes(); dM =dM.length<2 ? '0' + dM:dM
  var dS = '' + tmN.getSeconds(); dS =dS.length<2 ? '0' + dS:dS
  var tmp = dH + ':' + dM + ':' + dS
  if (NN) d.F.chas.value = tmp;
  else    d.getElementById('tm').innerHTML=tmp

  // Включаем периодический "перезапуск" этой же функции
  var t = setTimeout('showTime()',1000)
}
</script>
<div id=tm><form name="F"><input type="button" name="chas" value="XX:XX:XX"></form></div>
<script type="text/javascript">showTime()</script>

Как видно вся эта "пляска" c формой и инпутом - ориентирована только на браузер NN, не понимавший в старых версиях innerHTML у элементов.
Если вы уверены в том, что на Ваш сайт не будут заходить пользователи со старых netscape-ов, то все это можно опустить, и оставить лишь один div, т.е.:
<div id=tm></div>

Скрипт был найден на http://forall.ru-board.com/Svarga/

2) Часы-календарь на javascript, code #558[автор:sashalihodedChernovtsy]

текстовые часы-календарь ссылка |режим:

<script language="JavaScript">
<!--
var d  = document
var NN = d.layers ? true : (window.opera || window.mozilla) ? true:false
function myclock(){
var hours;
var mins;
var time;
ndata = new Date();
// Получение данных о дате и времени
monts = (ndata.getMonth() + 1)
days  = (ndata.getDate() )
hours = ndata.getHours();
mins  = ndata.getMinutes();
secs  = ndata.getSeconds();
year  = ndata.getYear();
// Дополнение нулем слева
if (monts < 10) {monts = "0"  + monts }
if (days  < 10) {days  = "0"  + days }
if (hours < 10) {hours = "0"  + hours }
if (mins  < 10) {mins  = "0"  + mins }
if (secs  < 10) {secs  = "0"  + secs }
//if (NN == true) {year  = year} else
if (NN== false) {year  = 1900 + year}
// Данные для вывода
var datastr = '<font face="arial, verdana" size="2" color="#c72027"><b>'+
hours + ":" + mins + ":"+ secs + '&nbsp;'+ days +"."+ monts + "."+ year + '</b></font>'
// Вывод данных
// Если Netscape Navigator
if (document.layers){
document.layers.clockexam.document.write(datastr)
document.layers.clockexam.document.close()
}
 // Если Internet Explorer
else if (document.all)
clockexam.innerHTML         = datastr
//else if (NN) d.F.chas.value = datastr;
else d.getElementById('clockexam').innerHTML= datastr
 
// Вызов функции с интервалом 1000 ms
setTimeout("myclock()",1000)
}
-->
</script>

<script language="JavaScript">
<!--
var d  = document
var NN = d.layers ? true : (window.opera || window.mozilla) ? true:false
function myclock(){
var hours;
var mins;
var time;
ndata = new Date();
// Получение данных о дате и времени
monts = (ndata.getMonth() + 1)
days  = (ndata.getDate() )
hours = ndata.getHours();
mins  = ndata.getMinutes();
secs  = ndata.getSeconds();
year  = ndata.getYear();
// Дополнение нулем слева
if (monts < 10) {monts = "0"  + monts }
if (days  < 10) {days  = "0"  + days }
if (hours < 10) {hours = "0"  + hours }
if (mins  < 10) {mins  = "0"  + mins }
if (secs  < 10) {secs  = "0"  + secs }
//if (NN == true) {year  = year} else
if (NN== false) {year  = 1900 + year}
// Данные для вывода
var datastr = '<font face="arial, verdana" size="2" color="#c72027"><b>'+
hours + ":" + mins + ":"+ secs + '&nbsp;'+ days +"."+ monts + "."+ year + '</b></font>'
// Вывод данных
// Если Netscape Navigator
if (document.layers){
document.layers.clockexam.document.write(datastr)
document.layers.clockexam.document.close()
}
 // Если Internet Explorer
else if (document.all)
clockexam.innerHTML         = datastr
//else if (NN) d.F.chas.value = datastr;
else d.getElementById('clockexam').innerHTML= datastr

// Вызов функции с интервалом 1000 ms
setTimeout("myclock()",1000)
}
-->
</script>

Оптимизированная под Mozilla-у версия
Затем в теге Боди надо загрузить написанную функцию и где-то в абзаце с указанным id поставить часы - календарь.
С уважением, Саша Лиходед!

<< назад наверх

*	можно кириллицей (недопустимые символы:?&+=\/%#)
**	только для зарегистрированных пользователей

Популярные задачи:

Часики на js

Текстовые, простые часы

Реализации: