X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-04-19
  • 19737 переглядів

  • Дизайн та розробка сайту

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

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

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

Данный скрипт работает благодаря 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
Проголосовало: 13, в среднем: 4.2 из 5
Читайте також