Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 11.10.2024)
666340
солдат
369
самолетов
329
вертолетов
8953
танков
17800
ББМ
19322
артиллерия
976
ПВО
1229
РСЗО
26398
машин
28
корабли и катера
Уроки JavaScript – как получить текущую дату и время
Опубликовано Обновлено: 12.04.2019

Уроки JavaScript – как получить текущую дату и время

 

 

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

 

 

Объект даты Date() в JavaScript

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

<script type="text/javascript">
var currentDate = new Date();
console.log(currentDate);
</script>

 

 

Всякий раз, когда вам нужно создать экземпляр объекта Date(), используйте похожую конструкцию (с использованием ключевого слова new, за которым следует имя объекта). После доступа к объекту даты, вы можете обращаться к нужным методам этого объекта.

 

Некоторые методы объекта даты:

Метод объекта Возвращаемое значение
getDate() возвращает день месяца
getDay() возвращает день недели
getHours() возвращает час (начинается с 0-23)
getMinutes() возвращает минуты
getSeconds() возвращает секунды
getMonth() возвращает месяц (начинается с 0-11)
getFullYear() возвращает текущий год
getTime() возвращает полное время (в немного странном формате)

 

 

Теперь перейдем к практике.

Допустим, вам нужно получить сегодняшнюю дату. Тогда используйте следующую конструкцию:

<script type="text/javascript">
var todayDate = new Date();
var currYear = todayDate.getFullYear();
var currMonth = todayDate.getMonth()+1;
var currDay = todayDate.getDate();
document.write("Сегодняшняя дата: ");
document.write(currDay + "-" + currMonth + "-" + currYear);
</script>

 

Результат будет следующего формата:

Сегодняшняя дата: 7-4-2019
// завтра результат будет другой, поскольку дата изменится

 

 

Давайте немного расшифруем приведенный выше код:

  • todayDate – это переменная, в которую записывается экземпляр объекта Date(). Вы можете назвать эту переменную как угодно. После создания экземпляра, эта переменная будет иметь доступ ко всем методам данного объекта. Например, выражение:
var currYear = todayDate.getFullYear();

означает «Получить текущий год и присвоить его переменной currYear».

  • Мы добавили +1 к переменной месяца (currMonth), поскольку в JavaScript месяцы отсчитываются, начиная с «0», а не с «1».
  • Объект Date() в JavaScript всегда использует значения даты и времени, которые установлены на компьютере текущего пользователя. Таким образом, для разных пользователей будут показываться разные дата/время, в зависимости от того, в каком месте мира он или она находится.

 

 

Практические решения с использованием даты в JavaScript

 

  • Показ разных картинок на сайте в зависимости от времени суток

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

Подготовьте две разные картинки (одну для дня, другую для ночи).

Теперь добавьте простой скрипт:

<script type="text/javascript">
var currDay = new Date();
var dayTime = currDay.getHours();
if (dayTime <= 21) {
 document.write("<img src='day.jpg'>");
} else {
 document.write("<img src='night.jpg'>");
}
</script>

 

Здесь мы проверяем текущее время, если сейчас больше 21:00, тогда будет показываться фоновая картинка для ночи, в противном случае будет показана фоновая картинка для светлого времени суток.

 

 

  • Добавление на сайт онлайн часов с помощью формы

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

Вы можете скопировать и вставить приведенный ниже код на свой сайт и, при желании, немного поиграться с ним:

<form name="Clock">
 <input type="text" size="10" name="timer">
</form>
<script type="text/javascript">
function showCurrentTime(){
 var currDate = new Date();
 var hours = currDate.getHours();
 var minutes = currDate.getMinutes();
 var seconds = currDate.getSeconds();
 if (minutes <= 9) {
  minutes = "0" + minutes;
 }
 if (seconds <= 9) {
  seconds = "0" + seconds;
 }
 document.Clock.timer.value = hours + ":" + minutes + ":" + seconds;
 setTimeout("showCurrentTime()", 1000);
}
showCurrentTime();
</script>

 

 

Некоторые пояснения кода:

  • Если минуты/секунды меньше или равны 9, мы добавляем перед цифрой времени 0, чтобы формат секунд и минут был в двухзначном виде с ведущим нулем.
  • В рассмотренном коде основной частью является метод JavaScript setTimeout, который запускает функцию showCurrentTime() каждую секунду. Данный метод обновляет функцию каждую секунду, что создает иллюзию, что часы действительно тикают.
  • Помните, формат часов в JavaScript от 0 до 23, а не от 1 до 24!
  • Важно! Не используйте форму на своем реальном сайте для показа часов. Такая реализация имеет свои преимущества, но в данном уроке она используется только лишь для демонстрационных целей. Используйте для этого другие HTML элементы.

 

 

 

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Быстрый доступ по сайту SebWeo
Угости меня кофе