phpjsJqueryhtmlcssblog

Идущие часы на javascript

javascript часы или часы на js. Несколько примеров часов на javascript, скопировать скрипт часов на javascript. Настоящие часы, с показаниями обновляющиеся каждую секунду. Скрипт часов можно скопировать здесь, либо по ссылке, в архиве...

Подробно о часах на javascript

1. Скрипт часы на javascript..
2. Пример часы на javascript .
3. Как добавить ноль к цифре во времени!?
4. Скачать можно здесь

Скопировать ссылку



Скрипт часы на javascript.

Для того, чтобы часы на javascript заработали, нам потребуется:


Куда-то нам нужно выводить часы на javascript , пусть это будет div с идентификатором id

<div id="clock_js"></div>

Далее нам понадобится setInterval с периодом обновления 1 секунда. Поскольку часы с секундными, то и обновления в 1 секунду - этого будет достаточно(1сек = 1000):

setInterval(clock_on_javascript, 1000);

Функция clock_on_javascript

Создаем новый объект Date:

var data = new Date();

Получим часы(data.getHours()), минуты(data.getMinutes()), секунды(data.getSeconds()) из созданного объекта:

var time  = data.getHours() + ":" +  data.getMinutes() + ":" +  data.getSeconds();

С помощью getElementById в id со значением clock_js, часы во внутрь поместим с помощью innerHTML

document.getElementById("clock_js").innerHTML = time;
Скопировать ссылку



Пример часы на javascript .

Далее соберем весь скрипт часов на javascript в одном месте:

<div id="clock_js"></div>

<script>

setInterval(clock_on_javascript, 1000);

function clock_on_javascript() {

var data = new Date();  

var time  = data.getHours() + ":" +  data.getMinutes() + ":" +  data.getSeconds();

document.getElementById('clock_js').innerHTML = time;  

}

</script>

И нам осталось, только и всего - разместить выше приведенный скрипт часов на javascript прямо здесь:

Вывод часов на сайте в реальном врмени:

А где ведущий ноль в часах javascript

Вы наверное обнаружили, что не хватает ведущего нуля в наших часах.

Его по умолчанию нет.

Поэтому... нам придется самостоятельно добавить его ко всем трем позициям в наших часах:

Часы,

минуты,

секунды.

Скопировать ссылку



Добавляем ведущий ноль в часах на javascript.

Как уже выше было сказано, что в случае, если число в трех позициях одинарное, то ведущий ноль отсутствует.

Поэтому... создадим условие для часов, если значение часов будет меньше 10, то перед переменной добавим ноль.:

if(hours < 10){hours = "0" + hours;}

Аналогично поступаем с минутами:

if(minutes < 10){minutes = "0" + minutes;}

и секундами.

if(seconds < 10){seconds = "0" + seconds;}

Соберем обновленный скрипт часов на javascript

<script>

setInterval(clock_on_javascript_1, 1000);

function clock_on_javascript_1() {

var data = new Date();

hours = data.getHours();

if(hours < 10){hours = "0" + hours;}


minutes = data.getMinutes();

if(minutes < 10){minutes = "0" + minutes;}


seconds = data.getSeconds();

if(seconds < 10){seconds = "0" + seconds;}


time = hours + " : " + minutes + " : " + seconds;

document.getElementById("show_1").innerHTML = time;

}

</script>

Часы на javascript с ведущими нулями

Часы на javascript можно скачать отдельным архивом.

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---