Создание Live Clock javascript

Вот как это сделать. Рабочая демонстрация .

Во-первых, в верхней части вашего HTML-документа:

 .datetime { color: #C11B17; font-family:arial; font-size: 16px; } 

Мы делаем это, чтобы немного убрать наш HTML-код:

 $rdate1 = 1240550032; // Fri, 24 Apr 2009 05:13:52 GMT $expiredate = date('dm YG:i:s', $rdate1); $time = $rdate1 - time(); $days = floor($time/86400); $hours = floor(($time-($days*86400))/3600); $mins = floor(($time-($days*86400)-($hours*3600))/60); $secs = floor($time-($days*86400)-($hours*3600)-($mins*60)); printf(" Your account is going to expire in <span class='datetime' id='days'>%s</span> Days <span class='datetime' id='hours'>%s</span> Hours <span class='datetime' id='minutes'>%s</span> Minutes <span class='datetime' id='seconds'>%s</span> Seconds ", $days, $hours, $mins, $secs); 

Я не совсем уверен, откуда взялся этот средний шаг, но код выше дает мне разницу во времени между $rdate1 (предположительно, временной отметкой unix) и time() .

Наконец, мы можем сделать что-то подобное с Javascript, чтобы обновить время после загрузки страницы:

 addEvent(window, 'load', function() { var eDays = document.getElementById('days'); var eHours = document.getElementById('hours'); var eMinutes = document.getElementById('minutes'); var eSeconds = document.getElementById('seconds'); var timer; timer = setInterval(function() { var vDays = parseInt(eDays.innerHTML, 10); var vHours = parseInt(eHours.innerHTML, 10); var vMinutes = parseInt(eMinutes.innerHTML, 10); var vSeconds = parseInt(eSeconds.innerHTML, 10); vSeconds--; if(vSeconds < 0) { vSeconds = 59; vMinutes--; if(vMinutes < 0) { vMinutes = 59; vHours--; if(vHours < 0) { vHours = 23; vDays--; } } } else { if(vSeconds == 0 && vMinutes == 0 && vHours == 0 && vDays == 0) { clearInterval(timer); } } eSeconds.innerHTML = vSeconds; eMinutes.innerHTML = vMinutes; eHours.innerHTML = vHours; eDays.innerHTML = vDays; }, 1000); }); function addEvent( obj, type, fn ) { if ( obj.attachEvent ) { obj['e'+type+fn] = fn; obj[type+fn] = function(){obj['e'+type+fn]( window.event );} obj.attachEvent( 'on'+type, obj[type+fn] ); } else obj.addEventListener( type, fn, false ); } 

Это выполнимо на клиенте с небольшим количеством JavaScript. Без использования фреймворка, такого как jQuery, который будет иметь незначительную помощь здесь, основной метод будет примерно таким же:

• Настройте обработчик событий каждую секунду

Внутри обработчика событий:

• Получить текущую дату и время и отформатировать его по желанию
• Обновите содержимое другого элемента с новым значением

В качестве конкретного примера следующая функция установит простое обновление даты и времени с помощью именованного элемента:

 function clock( id ) { var target = document.getElementById( id ); if( target ) { var callback = function() { var datetime = new Date().toLocaleString(); target.innerHTML = datetime; }; callback(); window.setInterval( callback, 1000 ); } } 

Обратите внимание на использование new Date().toLocaleString() для извлечения и форматирования текущей даты / времени; также, используя window.setInterval() чтобы настроить обратный вызов на огонь каждую секунду.

PHP, поскольку он серверный , не может быть живым. Вам придется делать манипуляции с датами (по крайней мере, материал, который изменяется), и обновлять DOM с помощью JavaScript, который является клиентским .

Стив

JS-Clock – лучшее решение для живых часов. это мини-версия JS имеет всего лишь 4 КБ. Я рекомендую это.