Какой самый большой недостаток скрипта часов на JavaScript? Правильно — они показывают время пользовательской машины, которое вполне может быть неверным. А какой самый большой недостаток скрипта часов на PHP? Правильно — они статичны и отображают время сервера на момент загрузки страницы. AJAX скрипт лишен обоих недостатков
:
function showClock() {
var obj = document.getElementById('clock');
var req;
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if(window.ActiveXObject) {
try {
req = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e){}
try {
req = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){}
}
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200)
{ obj.innerHTML = 'Московское время '+req.responseText; }
};
req.open("POST", 'xmlhttp.php', true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send('clock=1&ajax=1');
}
else alert("Браузер не поддерживает AJAX");
}
setInterval(showClock, 3000);
Серверная часть:
echo date('H:i:s');
Пример работы:
(подождите три секунды)
А для ламеров поподробней мона было?
У этих часиков тоже есть недостаток — страница постоянно хавает трафик. Но думаю если не отображать секунды, и увеличить интервал до минуты, то этот недостаток тоже будет не существенным.
можно и секунды отображать ) просто часы надо делать так — ajax грузить время с сервера, а отображать и изменять уже javascript
На этом примере видно не меньше "подводных камней" ajax, чем его достоинств. Мало того, то сами ответы приходят асинхронно и с разной задержкой, так еще и сам javascript ничего не гарантирует при установлении интервала в 1000мс. Попробуйте переключиться на другую вкладку в браузере/другое приложение и вернуться обратно — секунды могут начать изменяться вообще в произвольном порядке, даже не по возрастанию.
Вообще лучше всего конечно просто брать время на стороне сервера (например с помошью php) а потом с помощью JS запускать их на стороне клиента и никаких проблем. А так спасибо за статьи, помогло. 🙂
Чёто у меня не запускается скрипт…. пусто, ничего не выводит. Если не сложно, помогите разобраться пожалуйста.
Все просто супер, работает на ура!
Огромное спасибо АВТОРУ за то, что он написал этот скрипт.
Очень искал!
В отображаемых комментариях перед двойными кавычками везде идет лишний слэш 🙁
>> Вообще лучше всего конечно просто брать время на стороне сервера (например с помошью php) а потом с помощью JS запускать их на стороне клиента и никаких проблем. А так спасибо за статьи, помогло. 🙂 +1 Зачем нагружать сервер лишней работой? Один раз посылаем запрос к серверному скрипту, который отдает время сервера, разбиваем значение стандартными средствами (типа, explode(":", $time)) и дальше пишем простую функцию для управления. Выглядеть будет примерно так:
// Часы - int var hour = 0; // Минуты - int var minute = 0; // Минуты - int var second = 0; // Общее время - char[] var time = ''; // Дополнительный флаг var timeChanged = 1; // Возможно пользователь захочет остановить часы var timerEnabled = 1; // Получаем время от серверного скрипта function ajax_time() { //... // В конце разбиваем полученное время и записываем по отдельности его в переменные hour, minute, second. // Общее время записываем в переменную time. } function timeDelayer() { // Проверяем включен ли таймер if (!timerEnabled) return; // Будем вызывать каждую секунду отдельную функцию if (timeChanged) setTimeout("time_proceed", 1000); timeChanged = 0; // Рекурсивно вызываем эту функцию timeProceed(); } function timeProceed() { second++; if (second >= 60) { minute++; second = 0; } if (minute >= 60) { hour++; minute = 0; } var cHour = second; var cMinute = minute; var cSecond = hour; // Т.к. переменные целочисленные, то в них может содержаться только по одной цифре, будет выглядеть не очень красиво (типа 1:5:3, а надо 01:05:03), проверим это. // Не C++ и преобразование типов нам не нужно if (second < 10) cSecond = "0" + second; if (minute < 10) cMinute = "0" + minute; if (hour < 10) cHour = "0" + hour; // Итоговое время time = cHour + ":" + cMinute + ":" + cSecond; // Кроосбраузерность уже самостоятельно прописываем document.getElemntById("time").innerHTML = time; timeChanged = 1; return true; } // Функция для остановки таймера // Делаем кнопочку и для нее событие 'onclick="timeStop();"' // При остановке таймера и повторном его запуске будет необходима последующая синхронизация с сервером function timeStop() { timerEnabled = 0; return; }Функцию timeDelayer необходимо вызывать рекурсивно с проверкой флага состояния, потому что задержка и выполнение функций выполняется асинхронно, т.е. без такого вызова функция не выполнялась бы каждую секунду. Считаю это самым оптимальным методом отображения часов, а сами часы на сайте считаю ненужным бредом, уж извините =) Только если делать на отдельной странице сервис отображающий время в разных странах, ну, или хотя бы точное московское (многим геймерам такое нужно). P.S. Писал прямо в форме ответа для того, чтобы отобразить саму идею, поэтому в примере могут быть ошибки, да и скорее всего они будут. P.S.S. На сайт забрел случайно, так что не пинайте если что =[
согласен с Gorky и Deft, что в случае с часами разумней брать время с сервера только один раз. Оформил пример Deft'а, работоспособность не проверял.
По своему посту скажу: В 29 строке ошибка, вызов рекурсии и вызывать надо timeDelayer(), а не timeProceed(); И еще после 41 строки нужно бы добавить вот это: // Сбрасываем часы, если достигли 24:00:00 if (hour > 23) { hour = 0; minute = 0; second = 0; } Вроде бы так. Работоспособность неохота самому проверять =) P.S. Побольше бы сайтов, где можно просто оставить коммент без всяких регистраций +_+
спасибо автору!!! зы дело не в том что лучше или хуже, а в ВОЗМОЖНОСТИ создания одинаковых вещей разными средствами.
Хороший наглядный пример работы AJAX. PS: В строке 22 не надо посылать переменные, достаточно req.send(null);
Я вчера написал скрипт вроде работает, выдаю его на суд=) Не судите строго мне 12 лет! <?php header("Content-Type: text/html;charset=UTF-8;"); $Hour = date("H"); $Minute = date("i"); $Second = date("s") ?> <html> <head> </head> <body> <form name="d"> <p><strong>Московское время:</strong><input type="text" size="8" name="d2"></p> </form> <script> var second=<?php echo $Second ?>; var minute=<?php echo $Minute ?>; var hour=<?php echo $Hour ?>; document.d.d2.value='0' function display(){ second++; if (second>=60){ second=0 minute++ } if (minute>=60){ minute=0 hour++ } if (hour>23){ hour=0 minute=0 second=0 } var cHour = hour; var cMinute = minute; var cSecond = second if (second < 10) cSecond = "0" + second; if (minute < 10) cMinute = "0" + minute; if (hour < 10) cHour = "0" + hour; document.d.d2.value=cHour+":"+cMinute+":"+cSecond setTimeout("display()",1000) } display() </script> </body> </head> </html>
var obj = document.getElementById('clock'); rак вот это понять???
=)
obj это название переменной, а document.getElementById('clock') это значение переменной.
Если бы автор был в команде с "Тормозом"(brokenbrake.biz) — то цены бы им небыло. Спасибо автору!
Андрей Шеляков , document.getElementById('clock') это не значение переменной , а получение экземляра объекта называеться
Ну да=)
Я не понимаю, зачем такие вещи делать?:) Вообще чтобы отображать тикающее время сервера нужно воспользоваться командами PHP чтобы назначить через JavaScript время отсчета:) Но как пример он очень хорошо выглядит:)
Андрей Шеляков, ты молодец, я это и имел ввиду:)
Я использовал технологию "попроще" — брал время каждые 5 минут для получения РАЗНИЦЫ с текущим компом и обычной явой получал время на сервере. За 5 минут вряд-ли время на локальной машине сильно убежит. И трафик не сильно при этом жрет.
На методе req.send в опере пропадают выведенные подсказки (title у всех объектов на странице) и в строке состояния (та что внизу), если курсор наведен на ссылку, адрес ссылки перестает отображаться. Здесь на этом сайте тажа проблема. Видел чаты на AJAX без этой проблемы… Как её решить?