Главная
Web-дизайн
Скрипт текущей даты и времени или цифровые часы Javascript

Скрипт текущей даты и времени или цифровые часы Javascript

Цифровые часы

Доброго времени суток. 🙂

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

Данный скрипт работает благодаря Javascript. Чтобы сделать себе такие цифровые часы, Вам нужно выполнить небольшую инструкцию по установке.



Пример

Для начала в шапке сайта перед закрывающимся head, можно так же в подвале перед закрывающимсяbody, добавить скрипт или поместить в отдельный файл, а потом подключить. Сам скрипт имеет вот такой вид:

<script type="text/javascript">
function clock() {
var d = new Date();
var month_num = d.getMonth()
var day = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();

month=new Array("января", "февраля", "марта", "апреля", "мая", "июня",
"июля", "августа", "сентября", "октября", "ноября", "декабря");

if (day <= 9) day = "0" + day;
if (hours <= 9) hours = "0" + hours;
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;

date_time = "Сегодня - " + day + " " + month[month_num] + " " + d.getFullYear() +
" г.&nbsp;&nbsp;&nbsp;Текущее время - "+ hours + ":" + minutes + ":" + seconds;
if (document.layers) {
 document.layers.doc_time.document.write(date_time);
 document.layers.doc_time.document.close();
}
else document.getElementById("doc_time").innerHTML = date_time;
 setTimeout("clock()", 1000);
}
</script>

В 18 и 19 строке настройка текста, который будет выводится. Так что если захотите заключить в теги, чтобы задать стили отдельно каждому элементу или изменить порядок вывода и тд., то можете подправить.

Теперь нужно добавить строку, которая будет выводить дату и часы в нужном месте. Для этого в нужном месте добавьте вот такой вот код:

<span id="doc_time"></span>

Чтобы запустить наши часы, сразу после вывода часов, добавьте еще вот такой маленький скрипт. Но, если Вы подключили главный скрипт в подвале, то этот маленький скрипт, нужно подключать после первого, иначе работать не будет.

<script type="text/javascript">
 clock();
</script>

все, часы готовы, дата тоже рядом с ними. Пользуйтесь, если надо, надеюсь эта маленькая полезная штука, поможет Вам решить задачу с установкой часов на сайт.

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(5 голосов, в среднем: 4.8 из 5)

Опубликован 1 комментарий

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий