Идущие часы на Javascript...

При абсолютной банальности вопроса найти короткий, работающий и кроссбраузерный кусочек кода не так легко - то решение устарело, то длинно и непонятно, то нужно JQuery подключать, то виджет ставить, то какие-то навороченные картинки вместо скромных часиков и т.п. Меж тем, всё на порядок проще - если нам достаточно отображения клиентского (установленного на часах Вашего компьютера) времени, то делаем так:

1. Подготовить элемент HTML, куда будем писать время, например

<span id="clock"></span>

2. В теге яваскрипта

<script type="text/javascript"> ... </script>

получить время из нового объекта Date:

var date = new Date();

Так как код будет выполняться неоднократно, следует предусмотреть функцию, которая затем будет вызываться повторно. Назовём её clock()

3. Записать в переменные нужные "части" даты, извлечённые стандартными методами, например, date.getHours() - это часы (от 0 до 23), date.getMinutes() - минуты, date.getSeconds() - секунды, date.getDate() - номер дня месяца, date.getMonth() - месяц, причём, с нумерацией от 0 до 11, date.getFullYear() - 4-значный год, date.getDay() - день недели (0 - Вс, ..., 6 - Сб), есть и другие методы.

Не надо пользоваться функциями вроде date.toLocaleString(), чтобы не зависеть от локали. Лучше вытащить из даты нужные поля "вручную", как в показанном ниже листинге.

4. Сформировать дату и/или время так, как Вам удобно, и засунуть в документ:

document.getElementById('clock').innerHTML = '...';

5. Обеспечить повторный вызов функции через одну секунду с помощью стандартного метода setTimeout

Вот соответствующий код в листинге и в работе:

<span id="clock"></span>
<script type="text/javascript">
function clock() {
 var date = new Date();
 var hour=date.getHours();
 var minute=date.getMinutes();
 var sec=date.getSeconds();
 var day=date.getDate();
 var month=date.getMonth();
 var year=date.getFullYear();
 var weekday=date.getDay();
 var monthes=new Array ('января','февраля','марта','апреля','мая','июня',
  'июля','августа','сентября','октября','ноября','декабря');
 var dayNames = new Array('Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота');
 document.getElementById('clock').innerHTML = '<font size="1">'+dayNames[weekday]+', '+day+' '+monthes[month]+' '+
  year+' года</font><br>'+(hour<10?'0':'')+hour+':'+(minute<10?'0':'')+minute+':'+(sec<10?'0':'')+sec;
 window.setTimeout('clock()',1000);
}
clock();
</script>
<noscript>Извините, Javascript выключен</noscript>

Функцию setInterval вместо setTimeout использовать не надо - может тупо завесить некоторые браузеры вроде ИЕ8 и младше. Кроме того, рекурсивный вызов setTimeout всегда лучше, чем setInterval там, где нужна фиксированная пауза между выполнениями. Просто регулярнее выполняется :)

Конечно, можно не обновлять весь вывод каждую секунду, а проверять, не пора ли это сделать - но это как раз усложнит код дополнительными проверками :)

28.06.2013, 00:36 [17369 просмотров]