Главная - Безопасность
Javascript получить текущую дату и время. Сравнение нативного JS, MomentJS и TempusJS
JavaScript - Урок 11. Дата, представление и обработка В JavaScript дата определяется количеством миллисекунд, прошедших с 1 января 1970 года.

Для работы с датой и временем применяется встроенный объект Date . Этот объект не имеет свойств, но обладает несколькими методами, позволяющими устанавливать и изменять дату и время.

Объект Date создается с помощью оператороа new и конструктора - Date .

Например:

var myData=new Date();

Значением переменной myData будет текущая дата и время:

Методами объекта Date можно получать отдельно значения месяца, дня недели, часов, минут и секунд:

  • getDate - возвращает число в диапазоне от 1 до 31, представляющее число месяца.
  • getHours - возвращает час суток в диапазоне от 0 (полночь) до 23.
  • getMinutes - возвращает минуты в диапазоне от 0 до 59.
  • getSeconds - возвращает секунды в диапазоне от 0 до 59.
Предположим, мы хотим написать сценарий, который будет определять текущее время и выводить его в формате "чч:мм:сс".

Javascript дата

Теперь напишем саму функцию nTime() :

function nTime(obj) { var t=new Date(); var h=t.getHours(); var m=t.getMinutes(); var s=t.getSeconds(); var result=h+":"+m+":"+s; obj.res.value=result; }

* как вы помните методы отделяются от объекта точкой, об этом мы говорили в уроке 3 * Как видите, все просто. Сначала определяем текущее время, а потом с помощью методов извлекаем из него отдельные значения часов, минут и секунд.

Здесь еще хочется пояснить строку var result=h+":"+m+":"+s . Впервые мы столкнулись с необходимостью выводить в результат, как значения переменных, так и простой текст. В принципе ничего сложного: переменные пишутся как есть, текст берется в кавычки, а знак + осуществляет операцию конкатенации, т.е. их объединения.

В нашем примере остался один недочет, мы хотели, чтобы время выводилось в формате "чч:мм:сс", а сейчас оно выводится в формате "ч:м:с". Т.е., в 5 утра, время будет отображаться как "5:0:0", а хотелось бы так: "05:00:00" (что более привычно). В качестве домашнего задания можете попробовать это исправить. Например, с помощью оператора if и строкового литерала "0" (идея проста: если часов меньше 10, то в результат перед h написать "0" и так со всеми переменными).

А пока продолжим изучать методы объекта Date :

  • getDay - возвращает день недели, как целое число от 0 (воскресенье) до 6 (суббота).
  • getMonth - возвращает номер месяца в году, как целое число от 0 (январь) до 11 (декабрь).
  • getYear - возвращает год в виде двух последних цифр (getFullYear - возвращает год в виде четырех цифр).

    * К сожалению, начиная с 2000 года, есть проблема с отображением года в разных браузерах. Метод getYear в IE отображает полный год (вместо двух последних цифр), а FireFox вместо XX отображает 1XX (т.е. подставляет 1). Поэтому предпочтительнее использовать метод getFullYear.

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

Код html-страницы будет простой:

Javascript дата

Теперь напишем саму функцию tData() :

Function tData(obj) { var s; var t=new Date(); var y=t.getFullYear(); var d=t.getDate(); var mon=t.getMonth(); switch (mon) { case 0: s="января"; break; case 1: s="февраля"; break; case 2: s="марта"; break; case 3: s="апреля"; break; case 4: s="мае"; break; case 5: s="июня"; break; case 6: s="июля"; break; case 7: s="августа"; break; case 8: s="сентября"; break; case 9: s="октября"; break; case 10: s="ноября"; break; case 11: s="декабря"; break; } var result=d+" "+s+" "+y; obj.res.value=result; }

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

Рассмотренные выше методы позволяют получать дату. Если же нам потребуется установить дату, то следует использовать следующие методы:

  • setDate - устанавливает число месяца в диапазоне от 1 до 31.
  • setHours - устанавливает час для текущего времени в диапазоне от 0 (полночь) до 23.
  • setMinutes - устанавливает минуты в диапазоне от 0 до 59.
  • setSeconds - устанавливает секунды в диапазоне от 0 до 59.
  • setYear - устанавливает значение года.
  • setMonth - устанавливает значение месяца в диапазоне от 0 (январь) до 11 (декабрь).
  • setTime - устанавливает значение объекта Date и возвращает количество миллисекунд, прошедших с 1 января 1970 года.
Так, если нам потребуется задать дату 06 декабря 2010 года, в функции мы будем иметь следующий код:

Var t=new Date(); var y=t.setYear(2010); var d=t.setDate(6); var mon=t.setMonth(11); ...

Задать дату можно прямо в конструкторе, указав в качестве параметра строку формата "месяц, день, год часы:минуты:секунды":

Var t=new Date("Feb,10,1975 17:45:10");

Значение часов, минут и секунд можно опустить (они будут равны нулю):

Var t=new Date("Feb,10,1975");

Эту же дату можно задать с помощью чисел, перечислив через запятую год, месяц, число, часы, минуты, секунды:

Var t=new Date(75, 1, 10, 17, 45, 10);

Или же, опуская часы, минуты и секунды (они будут равны нулю):

Var t=new Date(75, 1, 10);

* Есть проблема: IE год отображать не хочет, поэтому лучше эти варианты не использовать.

Вот собственно и все, вы вполне готовы самостоятельно написать сценарий, который при загрузке страницы отобразит дату, время и день ее посещения (в нормальном русском виде). Удачи!

Еще одна полезная для сайтов вещь - вставка текущей даты. Примеров скриптов даты можно найти в интернете десятки, однако многие из них, на мой взгляд, тяжеловесны и, следовательно, некрасивы. Между тем, используя стандартные средства JavaScript , вставить дату на страницу сайта можно очень просто. Я его очень часто применяю! На картинке (скриншот с действующего сайта) усадьбы «Сказка» !

Вот весь скрипт даты:

По-моему, проще некуда, достаточно красиво и понятно. Если у вас нет никакого желания изучать построение этого скрипта, то просто вставляйте его в любое место HTML-страницы и получите следующую надпись:

Еще один вариант более расширенный

//
// ]]>
// ]]>
// ]]>
// ]]>
// ]]>
! Сегодня
// + " " + d.getFullYear() + " г.");
// ]]>
// ]]>
// ]]>
// ]]>
// ]]>
// ]]>

Выглядит он так:

Сегодня

Вобщем не требуется никаких навыков, просто тупо вставляем код и все ок!

Подробнее:

Итак, начинаем с присвоения значения даты переменной d , затем создаём массивы (Array ) для дней недели (day ) и месяцев (month ), указывая их в необходимой грамматической форме: падеж, число, заглавная буква, если слово стоит в начале даты и т.п. Последняя строчка скрипта - собственно печать даты (document.write ). Здесь вы устанавливаете, что и в какой последовательности будете выводить в строке текущей даты. Компоненты отделяются друг от друга знаком + . Для ввода пробела используется конструкция " " , а для ввода буквы г (год) - конструкция " г."

Как видно из скрипта, получение данных о текущем времени выполняет элемент get . Этот метод позволяет получить следующую информацию:

  • getDate() - возвращает число от 1 до 31, представляющее число месяца;
  • getDay() - возвращает день недели как целое число от 0 (воскресенье) до 6 (суббота);
  • getMonth() - возвращает номер месяца в году;
  • getFullYear() - возвращает год. Если использовать просто getYear() , то будет выводиться текущий год минус 1900;
  • get Hours() - возвращает час суток;
  • getMinutes() - возвращает минуты как число от 0 до 59;
  • getSeconds() - возвращает число секунд от 0 до 59.

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


Для вывода даты вызываем скрипт в нужном месте HTML-кода страницы, используя следующую команду:


document.write(TODAY);

Если ваш сайт содержит много страниц, на которых надо показывать дату, то удобнее выделить Java -скрипт вывода даты в отдельный файл, например, data.js . Практически, это страница, состоящая из первого из описанных скриптов, то есть со строкой document.write (см. выше). Располагать её надо в том же каталоге, что и основная страница, и вызывать в месте вывода даты следующим образом:


Не забудьте проверить, чтобы файл data.js имел ту же кодировку, что и основной документ, иначе дата будет выводиться замечательными крючками, квадратиками и прочими финтифлюшками.

Замечание. Следует иметь ввиду, что описанный скрипт выводит дату, установленную на компьютере пользователя, что не всегда соответствует реальному текущему времени. Если вам необходимо показать точное время, то необходимо использовать РНР-скрипт, который будет показывать время на сервере.

На этом уроке мы познакомимся с объектом Date языка JavaScript и научимся его использовать на практике.

Создание даты – 4 примера

В JavaScript создание даты осуществляется с помощью объекта Date . Объект Date представляет собой точку на оси времени и предназначен для хранения даты и времени с точностью до миллисекунды.

Примеры создания даты в JavaScript.

1. Создание текущей даты и времени.

Получить текущую дату и время в JavaScript осуществляется посредством создания экземпляра объекта Date без указания параметров:

// текущая дата (дата и время, которая была в момент создания экземпляра объекта Date на локальном компьютере пользователя) var now = new Date(); // например, выведем текущую дату в консоль console.log(now);

Если нужно получить только сегодняшнюю дату в формате строки, то можно воспользоваться методом toLocaleDateString:

Var now = new Date().toLocaleDateString(); // 19.12.2019

Текущее время пользователя можно получить так:

Var now = new Date().toLocaleTimeString(); // 11:02:48 var now = new Date().toLocaleTimeString().slice(0,-3); // 11:02

Дату и время в формате строки можно получить следующим образом:

Var now = new Date().toLocaleString(); // 19.12.2019, 11:02:48

2. Создание даты путём указания объекту Date количества миллисекунд, прошедших с 1 января 1970 00:00:00 UTC.

// 1 год (не высокосный) = 365*24*60*60*1000 = 31536000000 мс // например, создадим дату 01.01.1971, 00:00:00 по UTC: var date1 = new Date(31536000000);

3. Создание даты посредством указания её объекту Date в виде строки.

При этом варианте создания даты JavaScript попытается понять переданную ей строку и сформировать на основе её дату. Преобразование строки в дату в JavaScript осуществляется с помощью метода Date.parse .

Например:

// создание даты на основе строки в формате DD.MM.YY var date1 = new Date("05.11.19"); // создадим дату на основе строки в формате YYYY-MM-DDThh:mm:ss.sss (символ T используется для разделения даты и времени) var date2 = new Date("2015-02-24T21:23"); // создадим дату на основе строки с указанием часового пояса (формат YYYY-MM-DDThh:mm:ss.sss±hh:mm): var date3 = new Date("2015-02-24T22:02+03:00");

4. Создание даты посредством указания следующих параметров через запятую: год (4 цифры), месяц (отсчёт ведётся с 0), день (1..31), часы (0..23), минуты (0..59), секунды (0..59), миллисекунды (0..999). Причём обязательными из них являются только первые два параметра.

Пример создания даты с указанием только обязательных параметров:

// создадим дату 01.01.2015 (неуказанные параметры по умолчанию равны: число - 01, часы - 00, минуты - 00, секунды - 00, миллисекунды – 000). var date1 = new Date(2015,01); // создадим дату 24.01.2015, 21:23 var date2 = new Date(2015,01,24,21,23);

Примечание: Если Вам необходимо установить дату и время в UTC, то можно воспользоваться методом Date.UTC .

//1 пример var date1 = Date.UTC(2015,1,1); var date2 = new Date(date1); alert(date2.toUTCString()); //2 пример var newDate = new Date(Date.UTC(2015,1,1)); alert(newDate.toUTCString());

Получение отдельных компонентов даты и времени

В JavaScript для получения отдельных компонентов даты и времени предназначены следующие методы:

  • getFullYear() – возвращает год, состоящий из 4 чисел;
  • getMonth() – возвращает месяц в формате числа от 0 до 11 (0 – январь, 1 – февраль, 2 – март, ..., 11 – декабрь);
  • getDate() – возвращает число месяца от 1 до 31;
  • getHours() – возвращает количество часов от 0 до 23;
  • getMinutes() – возвращает количество минут от 0 до 59;
  • getSeconds() – возвращает количество секунд от 0 до 59;
  • getMilliseconds() – возвращает количество миллисекунд от 0 до 999.

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

// создадим дату 11.11.2019 00:00 по UTC var newDate = new Date(Date.UTC(2019,11,11)); // получим компоненты даты, если на устройстве пользователя местное время равно UTC+10:00 newDate.getFullYear(); //2019 newDate.getMonth(); // 10 newDate.getDate(); // 11 newDate.getHours(); // 10 newDate.getMinutes(); // 0 newDate.getSeconds(); // 0 newDate.getMilliseconds(); // 0

Пример, в котором поприветствуем пользователя в зависимости от того какой сейчас у него интервал времени:

// получим текущее время пользователя и компоненты этого времени var now = new Date(), hour = now.getHours(), minute = now.getMinutes(), second = now.getSeconds(), message = ""; // определим фразу приветствия в зависимости от местного времени пользователя if (hour

 


Читайте:



Плавная прокрутка в браузерах Плавная прокрутка в яндекс браузере плагин

Плавная прокрутка в браузерах Плавная прокрутка в яндекс браузере плагин

Для просмотра страниц в интернете существует опция плавной прокрутки. Она позволяет передвигаться по странице вверх и вниз более гладко и ровно. В...

Английским телефонным будкам подарили вторую жизнь Красные телефонные будки в лондоне на английском

Английским телефонным будкам подарили вторую жизнь Красные телефонные будки в лондоне на английском

Известный дизайн будки, в которой располагался уличный телефон, принадлежит Джайлсу Гилберту Скотт. Красная чугунная будка была впервые...

Бесплатные файлообменники — как залить фото и получить ссылку на картинку Сервис для хранения изображений

Бесплатные файлообменники — как залить фото и получить ссылку на картинку Сервис для хранения изображений

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

Как вырезать человека в фотошопе

Как вырезать человека в фотошопе

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

feed-image RSS