Дата JavaScript: Работа с датой и временем JS

  1. Знаете ли вы функцию даты в Javascript?
  2. Представление дат с использованием массивов
  3. Работа с графиками
  4. Работа с графиками в реальном времени
  5. Методы даты
  6. Полезные ссылки

Знаете ли вы функцию даты в Javascript?

Этот код ниже показывает, как отображать текущую дату как можно более приблизительно. Это почти непригодно, поэтому грубо (просто), но кто не знает, как обрабатывать события даты в JavaScript, должен начать здесь.

связанные с: Полный курс JavaScript

<html> <head> </ head> <body> <script language = javascript type = "text / javascript"> now = new Date document.write ("Today is" + now.getDay () + "," + now) .getDate () + "from" + now.getMonth () + "from" + now.getFullYear ()) </ script> </ body> </ html> Листинг 1. Необработанный код для отображения текущей даты


Рисунок 1. Как будет выглядеть необработанная дата

Объясняя код:

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

document.write ("Today is" + now.getDay () + "," + now.getDate () + "from" + now.getMonth () + "from" + now.getFullYear ())

В следующей части кода мы будем вызывать метод document.write, который имеет функцию записи на экране. Внутри мы поместим основной код, отвечающий за создание дат. То, что заключено в кавычки, теперь будет текстом; и то, что находится вне кавычек, будет кодом, который мы должны изучить.

GetDay () покажет день недели. Вам нужно знать, что в JavaScript в большинстве случаев счет начинается с нуля. Итак, воскресенье - ноль, понедельник - один, вторник - два, и так далее.

GetDate (), в свою очередь, это день месяца, который не имеет того же правила, что и раньше, начиная с нуля.

GetMonth () и getFullYear (), с другой стороны, являются соответственно месяцем и годом, а месяц, как день недели, начинается с нуля, поэтому июль - это не седьмой месяц, а шестой месяц.

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

Представление дат с использованием массивов

В этом коде я создам два массива, один для рабочих дней и один для рабочих дней.

<html> <head> <script language = javascript type = "text / javascript"> dayName = new Array ("воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота" ") monName = new Array (" январь "," февраль "," март "," апрель "," май "," июнь "," август "," октябрь "," ноябрь "," декабрь ") now = new Дата </ script> </ head> <body> <script language = javascript type = "text / javascript"> document.write ("<h1> Today is" + dayName [now.getDay ()] + "," + now.getDate () + "from" + monName [now.getMonth ()] + "from" + now.getFullYear () + ". </ h1>") </ script> </ body> </ html> Листинг 2. Использование массивов для отображения дней

Объясняя код:

dayName = новый массив («воскресенье», «понедельник», «вторник», «среда», «четверг», «пятница», «суббота») monName = новый массив («январь», «февраль», «март», «Апрель», «Май», «Июнь», «Август», «Октябрь», «Ноябрь», «Декабрь»)

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

document.write ("<h1> Today is" + dayName [now.getDay ()] + "," + now.getDate () + "from" + monName [now.getMonth ()] + "from" + now. getFullYear () + ". </ h1>")

Внутри document.write мы помещаем имя массива, который будет использоваться, а затем в квадратные скобки помещаем функцию, которая возвращает индекс дня и месяца в векторе.


Рисунок 2. Результат отображения даты с использованием некоторых массивов

Работа с графиками

До сих пор это было показано только как показ даты. Теперь это будет похоже на представление графиков.

<html> <head> </ head> <body> <script language = javascript type = "text / javascript"> now = new Date document.write ("Сейчас есть" + now.getHours () + ":" + now .getMinutes () + ":" + now.getSeconds () + ":" + now.getMilliseconds ()) </ script> </ body> </ body> </ html> Листинг 3. Представляем времена

Работа с графиками в реальном времени

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

<html> <head> <script type = "text / javascript"> function time () {today = new Date (); h = today.getHours (); m = today.getMinutes (); s = today.getSeconds (); document.getElementById ('txt'). innerHTML = h + ":" + m + ":" + s; setTimeout ('time ()', 500); } </ script> </ head> <body onload = "time ()"> <div id = "txt"> </ div> </ body> </ html> Листинг 4. Представление в реальном времени

Объясняя код:

В голове надо создать функцию. Внутри я создал переменные (h, mes) для соответствующих временных объектов, таких как минуты и секунды. Сразу после создания этих переменных мы свяжем их с div, созданным вскоре после этого, в теле.

setTimeout будет выполнять код каждые 500 миллисекунд или каждые полсекунды.

<body onload = "time ()"> <div id = "txt"> </ div>

В теле мы должны указать, что функция time () должна выполняться сразу после загрузки страницы, поэтому мы вызываем ее в событии onload. Чуть ниже находится div, который будет загружать созданные часы.

Методы даты

Поскольку вы часто можете обрабатывать даты, ниже приведена таблица всех методов объекта даты. Вы увидите некоторые ссылки на UTC , что означает Всемирное координированное время, которое заменяет среднее время по Гринвичу (GMT) в 1986 году в качестве стандарта мирового времени.

Метод Описание Возвращаемые значения getDate () День от 1 до 31 месяца getUTCDate () getDay () Целочисленное значение дня недели от 0 до 6 getUTCDay () getFullYear () Четырехзначный год 1900 года getUTCFullYear getHours () Время от 0 до 23 getUTCHours () getMilliseconds () Число миллисекунд с последней секунды 0 до 999 getUTCMilliseconds () getMinutes () Количество минут с последнего часа 0 до 59 getUTCMinutes () getMonth () месяц года 0 a 11 getUTCMonth () getSeconds () Число секунд с последней минуты от 0 до 59 getUTCSeconds () getTime () Количество миллисекунд с полуночи 1 января 1970 года getTimezoneOffset () Разница между местным временем и GMT в минутах От 0 до 1439 getYear () Год от 0 до 99 для 1900–1999 годов и четыре цифры и далее parse () При заданной строке даты / времени возвращается число миллисекунд с полуночи 1 января. of 1970 setDate () Устанавливает день, учитывая число от 1 до 31 Дата в миллисекундах setUTCDate () Дата в миллисекундах setFullYear () Дата в миллисекундах setUTCFullYear () Дата в миллисекундах setHours () Устанавливает время, заданное числом от 0 до 23 Дата в миллисекундах setUTCHours () setMilliseconds () Устанавливает миллисекунды, учитывая число Дата в миллисекундах setUTCMilliseconds () Дата в миллисекундах setMinutes () Устанавливает минуты, учитывая число в диапазоне от 0 до 59 Дата в миллисекундах setUTCMinutes () setMonth () Устанавливает месяц, учитывая число от 0 до 11. Дата в миллисекундах setUTCMonth () setSeconds () Устанавливает секунды, учитывая число от 0 до 59 Дата в миллисекундах setUTCSeconds () setTime () Устанавливает дату, учитывая количество миллисекунд с Январь 1970 Дата в миллисекундах setYear () Устанавливает год с заданным двузначным или четырехзначным числом. Дата в миллисекундах toGMTString () GMT строка дата и время День дд ммм гггг, чч: мм: сс GMT toUTCString () TolocaleStri ng () Строка местного времени и даты Зависит от ОС, локали и браузера toString () Строка локального времени и даты Зависит от ОС и браузера UTC () Заданная дата в формате год, месяц и день (и необязательные часы, минуты, секунды и миллисекунды) возвращает количество миллисекунд с полуночи 1 января. 1970 Дата в миллисекундах valueOf () Количество миллисекунд с полуночи 1 января 1970 года Дата в миллисекундах

Фактически, это было введение в использование даты и времени на веб-страницах с использованием Java Script. Используя эти объекты, представленные ранее, веб-дизайнер может сделать события намного более сложными, но они не подходят для этой статьи, которая предназначена для начинающих JavaScript.

Полезные ссылки

Узнайте больше о Javascript;)

  • Учебник JavaScript :
    В этой статье мы рассмотрим, как использовать код JavaScript в наших веб-приложениях и на веб-сайтах. У нас будет введение в этот замечательный язык, который растет в веб-разработке.
  • Введение в Javascript :
    В этой статье приведено краткое, простое и практическое введение в язык сценариев Javascript, который стал одной из основ веб-разработки.
  • JavaScript: как и когда использовать операторы == и === :
    Узнайте о различиях между операторами == и === (e! = E! ==) в JavaScript и их влиянии на ваш код.
Знаете ли вы функцию даты в Javascript?