Сейчас: 09:47:02   26-го апреля 2024 г.
UsefulScript.ruСкриптыДата и времяДата, день недели и время
22
79

Текущая дата, день недели и время на JavaScript

Ранее мы уже рассматривали Скрипт текущей даты и времени. Теперь давайте рассмотрим более продвинутый вариант ранее рассмотренного скрипта. Основным отличием рассматриваемого скрипта даты и времени от предыдущего является добавление текущего дня недели (прописью на русском языке), разделение даты и времени для лучшего оформления и более компактный код.


Ниже располагается результат работы предлагаемого скрипта:


Сегодня - Дата    Текущее время - Время

Чтобы посетители Вашего сайта смогли наблюдать текущую дату, день недели и время, Вам понадобится для начала выбрать место на страничке и поместить туда следующий код:

HTML код:
Сегодня - <span id="js_date" style="color: blue;">Дата</span>&nbsp;&nbsp;&nbsp;
Текущее время - <span id="js_time" style="color: green;">Время</span>

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

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

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

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

 
date_date day " " month[d.getMonth()] + " " d.getFullYear() + " г. (" +
 
days[d.getDay()] + ")";
 
date_time hours ":" minutes ":" seconds;

 
document.getElementById("js_date").innerHTML date_date;
 
document.getElementById("js_time").innerHTML date_time;
}

setInterval("clock()"200);
</script>

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


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

Дата создания: 12:39:39 08.10.2012 г.
Посещений: 16561 раз(а).

Комментарии посетителей (18 шт.):
Игорь
0
# 460
(02:23:50  15.12.2012 г.)

Подскажите пожалуйста, как сменить серый цвет на другой цвет, у слов: Сегодня и Текущее время?
Ответить

Administrator
1
# 461
(12:25:04  15.12.2012 г.)

Это можно сделать при помощи тега span:
<span style="color: red;">Сегодня</span> - <span id="date" style="color: blue;">Дата</span>
Ответить

Игорь
4
# 463
(13:35:06  15.12.2012 г.)

Еще хотел узнать, к примеру, я живу в Оренбурге, скрипт показывает мое время, если на сайт зайдет человек из Москвы, то у него будет московское время? Можно как-нибудь сделать, чтобы показывало местное время, в независимости от того, кто в каком городе проживает? Чтобы был один часовой пояс.
Ответить

Игорь
0
# 464
(18:23:58  15.12.2012 г.)

Валидатор выдал 4 ошибки, ему не понравился символ "<" в строках:
if (day <= 9) day = "0" + day;
if (hours <= 9) hours = "0" + hours;
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;

Это можно как-нибудь исправить? Заменяю символ "<" на "&lt;", валидатор также выдает 4 ошибки.
Ответить

Administrator
0
# 466
(19:23:13  15.12.2012 г.)

Странно, может Вы где-то раньше допустили ошибку, т.к. только что проверил весь код на validator.w3.org и все нормально. Вставьте код на отдельную страничку и убедитесь сами.
Ответить

Виталий
0
# 1056
(18:02:42  21.08.2013 г.)

Здравствуйте! На сайте jimdo все работает, а на Drupal показывает только надписи Сегодня и Текущее время, помогите пожалуйста!
Ответить

Administrator
0
# 1059
(20:42:51  21.08.2013 г.)

Это означает, что у Вас не работает JavaScript код. Причины могут быть совершенно разные. Возможно, движок вашего сайта преобразует спецсимволы или вырезает теги. Посмотрите в исходном коде неработающей страницы JavaScript код (он должен быть без изменений).
Ответить

Игорь
-1
# 1433
(22:09:39  28.01.2014 г.)

Здравствуйте, у меня сайт в кодировке кириллица виндовс 1251, разместил данный код, но отображение все в иероглифах.
Ответить

Седой
0
# 2882
(20:53:13  06.12.2015 г.)

Всё же лучше switch();
Или
var date = new Date();
alert(date.toLocaleString('ru');
Ответить

Булат
0
# 3118
(19:03:08  26.03.2016 г.)

Спасибо за код. Объясните, пожалуйста, для чего нужен цикл (я вообще не понимаю условие с лейерами). Почему просто сразу не нашли элемента по id и записали туда значение?
И еще, если прямо на странице поставить яваскрипт-код, то все работает. А если поместить его в отдельный файл, то время выходит, но не обновляется. Можно обновить только обновлением страницы. Это почему так? Я использую джейквери, с этим это не связано?
Ответить

Administrator
0
# 3119
(21:00:33  26.03.2016 г.)

Стоит учесть, что скрипт был сделан в 2012 году, и document.layers нужен был для поддержки более старых браузеров. Сейчас это уже не актуально и можно убрать.
Либо перенесли неправильно, либо JS-файл закэшировался. Проверил - все работает.
Ответить

Булат
0
# 3120
(06:13:23  27.03.2016 г.)

На счет document.layers все понятно, спасибо!
А вот на счет обновления времени - что-то не идут они. Пробовал кэши чистить, запускать в браузерах IE, Firefox, Chrome, в новом Microsoft Edge - у всех такая же проблема. Не могли бы, пожалуйста, по коду посмотреть?
Код из-за больших размеров был перенесен на форум.
Ответить

Булат
0
# 3121
(06:55:41  27.03.2016 г.)

Я нашел причину!!! Оказывается, надо было убрать из функции тайм-аута скобки и кавычки! Вот так: setTimeout(clock, 1000);

Еще раз спасибо автору за код!!!
Ответить

Александр
1
# 3187
(20:57:10  27.04.2016 г.)

Огромное Вам спасибо! Давно искал подобный скрипт. Правда немного доделал под себя скрипт. Но все равно спасибо. Все очень отлично работает.
Ответить

Евгений
0
# 3494
(16:01:51  07.10.2016 г.)

Подскажите, что в скрипте изменить, чтобы дата была не текущая, а на день вперед?
Ответить

Administrator
0
# 3495
(22:54:41  07.10.2016 г.)

На мой взгляд, правильнее всего будет после строчки var d = new Date();
добавить строчку d.setDate(d.getDate()+1);
Ответить

Мир
0
# 4425
(19:22:48  26.02.2019 г.)

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

Administrator
0
# 4427
(20:54:24  26.02.2019 г.)

Например, такой:
Время на сайте - <span id="time">00:00:00</span>

<script type="text/javascript">
t = new Date();
function clock() {
var d = new Date();
d.setHours(d.getHours() - t.getHours());
d.setMinutes(d.getMinutes() - t.getMinutes());
d.setSeconds(d.getSeconds() - t.getSeconds());

var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();

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

document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds;
setTimeout("clock()", 1000);
}
clock();
</script>
Ответить

Закрыть
Ваше имя:
924 + 19 =
Добавить комментарий:
Ваше имя:
924 + 19 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Посетителей онлайн: 5

Как Вы узнали о нашем сайте?