Часы: время сервера на сайтеОтсебятина от 24 июля 2008 года. Теги: Javascript Часы
Часы на сайте... Да, в большинстве случаев, это бесполезная требуха. Но встречаются и случаи, когда часы являются центром внимания на сайте. Например, ваш сайт является видео-каналом, где по расписанию идут передачи. Примеров может быть уйма, но самый удачный, пожалуй, сайт-лотерея. Помните розыгрыши от Lays.ru? Как вы думаете, сколько человек ждало наступления следующего часа с мыслями "А вдруг я буду в списке?".
Основной проблемой большинства часов на JS является локальность. То есть, время берется с часов у клиента. Но что если пользователь находится в другом часовом поясе или часы у него отстают на минут 5? Конечно, сайты, подобные Lays.ru наверняка учитывали это беря время с сервера, который, в свою очередь, сверялся с атомными часами, что не скажешь о сотнях других сайтов с часами (не будет вновь обсуждать, нужны ли они им).
Решением данной проблемы является автокорректировка локального времени в пределах самого сайта.
Схема такая - сервер передает временную метку, JS-скрипт сравнивает разницу и ей манипулирует при просчете времени.
Да, у данной схемы есть один минус - не учитывается время открытия страницы, пинг. Но, поверьте, скорость открытия нормальной страницы не превышает 60 секунд у dial-up'щиков.
var dateobj = new Date (); //Создаем объект даты-времени
/*
Ставим серверную метку времени через PHP (умножение на 1000, потому что mktime() возвращает время в секундах, а JS использует миллисекунды
*/
var servertime = <?php
echo mktime ()*1000;
?>;
var clienttime = dateobj.getTime(); //Получаем время клиента
raznica = servertime - clienttime; //Вычисляем разницу (без var для глобальности)
//Функция подсчета времени, которую необходимо вызывать каждую секунду
function timer() {
var dateobj = new Date ();
//Создаем объект времени (каждую секунду он содержит другие свойства, а именно - другое время)
var correct = dateobj.getTime() + raznica; //Получаем откорректированную метку времени
dateobj.setTime(correct); //Ставим её в объект даты-времени
document.getElementById("dosya").innerHTML = dateobj.toLocaleTimeString(); //Вставляем время в элемент
setTimeout("timer("+raznica+")", 1000); //Вызываем функцию через 1000 миллисекунд
}
timer(); //Вызываем функцию (при загрузке страницы)
В html-страницы должно быть следующее:
<span id="dosya1"></span>
Немного другой вариант исполнения: он не корректирует время, если разница находится в интервале от 10 секунд до 1 минуты.
if (raznica > 7 || raznica < 60)
raznica = 0;
Вставлять после "raznica = servertime - clienttime;"
|