Часы для сайта

Опубликовано: 01.09.2018

видео Часы для сайта

Как добавить часы на свой сайт

Здравствуйте, сегодня рассмотрим следующий вопрос —  как создать часы на своем сайте с помощью кода (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 часовом формате.


Почему Часы Rolex Такие Дорогие?

<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»

rss