Главная
>>
Каталог задач
>>
Веб-разработка
>>
Клиентский скриптинг(js, vba и т.д.)
>>
Часики на js
Часики на js
реализации: javascript, количество: 2
Aвтор: this
Дата: 09.02.2006
Просмотров: 12563
Рейтинг:
7/5,4.89(1295)
+
реализации(исходники)
+добавить
Текстовые, простые часы
По-другому: "электронные" часы на сайте. Выглядит примерно следующим образом:
Текущее время:
Делается следущим образом:
- Создаем на странице элемент, в котором будет выводится значение времени. Это может быть span, div, p - в общем случае любой html элемент документа, отображаемое содержимое которого можно модифицировать.
- Создаем функцию, которая при запуске получает текущие количество часов, минут и секунд, формирует из этого требуемое представление текущего времени и сохраняет это в значение элемента, созданного в п.1.
- В конце этой функции размещаем setTimeout, указывая в параметрах имя нашей фукнции и интервал вызова - секунду. Т.е.: setTimeout('GetCurrTimeFunc()',1000)
- После этого делаем один единственный вызов этой функции где-нибудь в документе(или в onLoad() у body как вариант).
В результате этот один единственный вызов фукнции - отработает, запишет полученное время в элемент, и в конце запустит setTimeout, который начиная с этого момента будет периодически вызывать эту же нашу функцию с интервалов в 1000 миллисекунд, что приведет к тому, что наши часики начнут перерисовываться раз в секунду, каждый раз обновлясь с учетом прошедшей секунды. Что и требовалось.
Реализации:
javascript(2),
php(1)
+добавить реализацию
1)
Текстовые, простые часики работающие в IE, Opera, NN, Mozilla, FF, code #94[автор:this]
<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>
2)
Часы-календарь, 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 + ' '+ 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>
