X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2018-12-13
  • 8019 просмотр

    2 комментарий

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

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

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

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

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

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

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.