Здравствуйте, сегодня рассмотрим следующий вопрос –  как создать часы на своем сайте с помощью кода (javascript, php).
 

Скачать исходники для статьи можно ниже

Часы с помощью javascript.

 
1. Обычные цифровые часы.

<span id="pendule"></span>
<script language="javascript" type="text/javascript">
<!-- Begin
function clock() {
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
var amOrPm = "AM";
if (hours > 11) amOrPm = "PM";
if (hours > 12) hours = hours - 12;
if (hours == 0) hours = 12;
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;
dispTime = '<b>'+hours + ":" + minutes + ":" + seconds + " " + amOrPm+'</b>';
document.getElementById('pendule').innerHTML = dispTime;
setTimeout("clock()", 1000);
}
window.onload=clock;
//  End -->
</script>

Для проверки, того как работает данный скрипт – разместите вышеуказанный код в текстовой виджет wordpress – то есть заходим в панель управления вордпресс, в левом меню выбираем пункт “Внешний вид” и его подпункт “Виджеты”, ищем виджет с названием “Текст” – переносим его в нужный сайдбар (виджет) справа и вставляем наш код часов.

Если вы задались вопросом “Как вставить javascript на сайт – то советую прочитать мою предыдущую статью об этом.

 
2. Еще один скрипт часов, позволяющих отображать время как в 12 часовом, так и в 24 часовом формате.

<script language="JavaScript">
function checklength(i){
    if (i<10)
        {i="0"+i;}
    return i;
}
function clock(){
    var now = new Date();
    var hours = checklength(now.getHours());
    var minutes = checklength(now.getMinutes());
    var seconds = checklength(now.getSeconds());
    var format = 1;  //0=24 hour format, 1=12 hour format
    var time;

    if (format == 1){
        if (hours >= 12){
            if (hours ==12){
                hours = 12;
            }else {
                hours = hours-12;
            }
            time=hours+':'+minutes+':'+seconds+' PM';
        }else if(hours < 12){
            if (hours ==0){
                hours=12;
            }
            time=hours+':'+minutes+':'+seconds+' AM';
        }
    }
    if (format == 0){
        time= hours+':'+minutes+':'+seconds;
    }
     document.getElementById("clock").innerHTML=time;
    setTimeout("clock();", 500);
}
</script>

<div id="clock">
<script language="javascript">
<!--
 clock();
 //-->
 </script>
</div>

Если хотите, чтобы часы показывали в 12 часовом формате, то в строке var format – должна стоять “1”, если в 24 часовом – то “0”.

 
3. Часы, цифры которых выставляются с помощью картинок, которые вы можете сами нарисовать и вставить в скрипт – интересное решение.

<div id="script1">
<div><code>   <script language="javascript" type="text/javascript">
 /* Visit http://www.yaldex.com/ for full source code
 and get more free JavaScript, CSS and DHTML scripts! */
 <!-- Begin
 var dn;
 c1 = new Image(); c1.src = "c1.gif";
 c2 = new Image(); c2.src = "c2.gif";
 c3 = new Image(); c3.src = "c3.gif";
 c4 = new Image(); c4.src = "c4.gif";
 c5 = new Image(); c5.src = "c5.gif";
 c6 = new Image(); c6.src = "c6.gif";
 c7 = new Image(); c7.src = "c7.gif";
 c8 = new Image(); c8.src = "c8.gif";
 c9 = new Image(); c9.src = "c9.gif";
 c0 = new Image(); c0.src = "c0.gif";
 cb = new Image(); cb.src = "cb.gif";
 cam = new Image(); cam.src = "cam.gif";
 cpm = new Image(); cpm.src = "cpm.gif";
 function extract(h,m,s,type) {
 if (!document.images) return;
 if (h <= 9) {
 document.images.a.src = cb.src;
 document.images.b.src = eval("c"+h+".src");
 }
 else {
 document.images.a.src = eval("c"+Math.floor(h/10)+".src");
 document.images.b.src = eval("c"+(h%10)+".src");
 }
 if (m <= 9) {
 document.images.d.src = c0.src;
 document.images.e.src = eval("c"+m+".src");
 }
 else {
 document.images.d.src = eval("c"+Math.floor(m/10)+".src");
 document.images.e.src = eval("c"+(m%10)+".src");
 }
 if (s <= 9) {
 document.g.src = c0.src;
 document.images.h.src = eval("c"+s+".src");
 }
 else {
 document.images.g.src = eval("c"+Math.floor(s/10)+".src");
 document.images.h.src = eval("c"+(s%10)+".src");
 }
 if (dn == "AM") document.j.src = cam.src;
 else document.images.j.src = cpm.src;
 }
 function show3() {
 if (!document.images)
 return;
 var Digital = new Date();
 var hours = Digital.getHours();
 var minutes = Digital.getMinutes();
 var seconds = Digital.getSeconds();
 dn = "AM";
 if ((hours >= 12) && (minutes >= 1) || (hours >= 13)) {
 dn = "PM";
 hours = hours-12;
 }
 if (hours == 0)
 hours = 12;
 extract(hours, minutes, seconds, dn);
 setTimeout("show3()", 1000);
 }
 window.onload=show3;
 //  End -->
 </script>
 <img height=21 src="cb.gif" width=16 name=a>
 <img height=21 src="cb.gif" width=16 name=b>
 <img height=21 src="colon.gif" width=9 name=c>
 <img height=21 src="cb.gif" width=16 name=d>
 <img height=21 src="cb.gif" width=16 name=e>
 <img height=21 src="colon.gif" width=9 name=f>
 <img height=21 src="cb.gif" width=16 name=g>
 <img height=21 src="cb.gif" width=16 name=h>
 <img height=21 src="cam.gif" width=16 name=j></code></div>
</div>

Данный скрипт использует 14 изображений для отображения часов:

Скачать изображения для часов – clockimages.zip

Вы можете создать и использовать свои собственные изображения!

Изображения нужно загрузить в тот же каталог – где находится файл, использующий данный скрипт.

 
4. Часы со стилями

<span id="digitalclock" class="styling"></span>

<script>
<!--

//LCD Clock script- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use

var alternate=0
var standardbrowser=!document.all&&!document.getElementById

if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock" size="11"></form>')

function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"

if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes

if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+" "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+" : "+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+" : "+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show

//-->
</script>

После чего в файле стилей (в wordpress – файл style.css) прописываем оформление часов:

.styling{
background-color:black;
color:lime;
font: bold 16px MS Sans Serif;
padding: 3px;
}

Можете сами поменять оформление стиля – ничего сложного нет, так:

background-color – отвечает за цвет фона часов.

color – за цвет цифр.

font – за стиль цифр.

padding – отступ.

Часы с помощью PHP.

1. Простые цифровые часы

<?php 
date_default_timezone_set('Europe/Moscow');
echo date ( ' H : i : s ' ) ; ?>

Данные часы показывают текущее время на момент открытия странички, после чего нужно обновить страничку, чтобы узнать точное время.
Данный скрипт показывает точное московское время.

Если вы хотите, чтобы показывалось время по гринвичу оставьте следующей код:

<?php 
echo date ( ' H : i : s ' ) ; ?>

PS: Также советую прочитать одну из моих предыдущих статей, где вы  найдете лучшую коллекцию flash часов для сайта.

Также интересная статья про создание часов с помощью css и javascript на английском языке – “graphicdesignlanka.blogspot.ru/2013/01/top-12-analog-and-digital-clocks-using.html”