Дата и время в JS: как получить текущие, сравнить, преобразовать и найти разницу

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

Как работать с датой и временем с помощью JavaScript

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

Именно поэтому в этой статье мы рассмотрим некоторые передовые методы и лучшие практики работы с датами и временем в JavaScript.

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

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

Получение текущего года

Чтобы получить текущий год, вы можете использовать встроенный объект Date.

Вот код для получения текущего года:

const currentYear = new Date().getFullYear();

Метод getFullYear() возвращает текущий год в виде четырехзначного числа. Вы можете присвоить результат переменной, чтобы использовать его в другом месте вашего кода.

Если вам нужно получить текущий год в виде строки, вы можете просто использовать метод toString():

const currentYearString = new Date().getFullYear().toString();

Вот и все.

Получение текущей даты

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

Вот код для получения текущей даты:

const currentDate = new Date();

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

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

Вот пример:

const currentTime = new Date();
const hours = currentTime.getHours();
const minutes = currentTime.getMinutes();
const seconds = currentTime.getSeconds();

const formattedTime = `${hours}:${minutes}:${seconds}`;

console.log(formattedTime); // e.g. "13:45:22"

В этом примере мы используем метод getDate() для получения дня месяца, метод getMonth() для получения месяца (не забыв прибавить 1 к результату) и метод getFullYear() для получения года. Затем мы отформатируем эти значения в строку с помощью шаблонных литералов.

Получение текущего времени

Если вы хотите получить текущее время в виде отформатированной строки, вы можете использовать различные методы объекта Date для извлечения часов, минут и секунд, а затем отформатировать их в виде строки.

Вот пример:

const currentTime = new Date();
const hours = currentTime.getHours();
const minutes = currentTime.getMinutes();
const seconds = currentTime.getSeconds();

const formattedTime = `${hours}:${minutes}:${seconds}`;

console.log(formattedTime); // e.g. "13:45:22"

Если вы хотите отобразить время в определенном часовом поясе, вы можете использовать метод toLocaleTimeString(), который позволяет указать часовой пояс в качестве опции:

const currentTime = new Date();
const options = { timeZone: 'America/Los_Angeles' }; // specify the time zone as an option
const formattedTime = currentTime.toLocaleTimeString('en-US', options);

console.log(formattedTime); // e.g. "1:45:22 PM"

Мы передаем ‘en-US’ в качестве первого аргумента для указания локали, а в качестве второго аргумента передаем объект options для указания часового пояса.

Получение дня недели

Вот код для получения дня недели в виде числа, где воскресенье – 0, а суббота – 6:

const currentDate = new Date();
const dayOfWeek = currentDate.getDay();

Метод getDay() возвращает день недели в виде числа, где воскресенье равно 0, а суббота – 6. Вы можете присвоить результат переменной, чтобы использовать его в другом месте вашего кода.

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

Вот пример:

const currentDate = new Date();
const weekdayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const dayOfWeekString = weekdayNames[currentDate.getDay()];

console.log(dayOfWeekString); // e.g. "Wednesday"

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

Получение значения временной метки из строки даты

Чтобы получить значение временной метки из строки даты, вы можете использовать встроенный объект Date для анализа строки, а затем вызвать метод getTime() для получения временной метки.

Вот пример:

const dateString = '2023-02-22T13:45:22';
const timestamp = new Date(dateString).getTime();

console.log(timestamp); // e.g. 1645550722000

В этом примере мы создаем строку даты в формате ISO (YYYY-MM-DDTHH:mm:ss) и присваиваем ее переменной dateString. Затем мы создаем новый объект Date, используя строку, которая автоматически анализирует ее для создания нового объекта даты. Наконец, мы вызываем метод getTime() объекта date, чтобы получить значение временной метки в миллисекундах с 1 января 1970 года.

Если у вас есть строка даты в другом формате, вы можете использовать различные методы объекта Date, чтобы преобразовать ее в объект Date. Например, если ваша строка даты имеет формат “MM/DD/YYYY HH:mm:ss”, вы можете использовать метод split() для извлечения компонентов, а затем использовать конструктор Date для создания нового объекта даты:

const dateString = '02/22/2023 13:45:22';
const [month, day, year, hours, minutes, seconds] = dateString.split(/[/ :]/);
const timestamp = new Date(year, month - 1, day, hours, minutes, seconds).getTime();

console.log(timestamp); // e.g. 1645550722000

В этом примере мы используем метод split() для извлечения месяца, дня, года, часов, минут и секунд из строки даты. Затем мы передаем эти значения в конструктор Date, чтобы создать новый объект даты. Обратите внимание, что мы вычитаем 1 из значения месяца, потому что конструктор Date ожидает нулевой индекс для месяца.

Установка различных дат и времени для экземпляра Date

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

Установите год, месяц и день:

const date = new Date();
date.setFullYear(2024);
date.setMonth(4); // note that the month is zero-based, so 4 represents May
date.setDate(13);

Установите часы, минуты и секунды:

const date = new Date();
date.setHours(15);
date.setMinutes(30);
date.setSeconds(0);

Установите дату и время одновременно с помощью метода setTime():

const date = new Date();
date.setTime(1745667000000); // set the timestamp value for January 24, 2025, at 8:10:00 AM

Вы можете комбинировать эти методы для установки любой комбинации дат и времени, которая вам необходима.

Вот пример, который устанавливает дату на 13 мая 2024 года в 15:30:

const date = new Date();
date.setFullYear(2024);
date.setMonth(4); // note that the month is zero-based, so 4 represents May
date.setDate(13);
date.setHours(15);
date.setMinutes(30);
date.setSeconds(0);

В этом примере мы используем методы setFullYear(), setMonth() и setDate() для установки года, месяца и дня соответственно. Затем мы используем методы setHours(), setMinutes() и setSeconds() для установки часов, минут и секунд соответственно.

Сложение или вычитание значений даты и времени

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

Сложение или вычитание дней:

const date = new Date();
date.setDate(date.getDate() + 7); // add 7 days
date.setDate(date.getDate() - 3); // subtract 3 days

Добавьте или вычтите часы:

const date = new Date();
date.setHours(date.getHours() + 2); // add 2 hours
date.setHours(date.getHours() - 1); // subtract 1 hour

Добавьте или вычтите минуты:

const date = new Date();
date.setMinutes(date.getMinutes() + 30); // add 30 minutes
date.setMinutes(date.getMinutes() - 15); // subtract 15 minutes

Добавьте или вычтите секунды:

const date = new Date();
date.setSeconds(date.getSeconds() + 45); // add 45 seconds
date.setSeconds(date.getSeconds() - 10); // subtract 10 seconds

Добавьте или вычтите миллисекунды:

const date = new Date();
date.setTime(date.getTime() + 60000); // add 1 minute (in milliseconds)
date.setTime(date.getTime() - 30000); // subtract 30 seconds (in milliseconds)

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

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

const date = new Date();
date.setDate(date.getDate() - 3);
date.setHours(date.getHours() - 2);

В этом примере мы используем метод setDate() для вычитания 3 дней из текущей даты, а метод setHours() – для вычитания 2 часов из текущего времени.

Вычисление разницы между датой и периодами времени

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

Вычислите разницу между двумя датами в миллисекундах:

const date1 = new Date('2023-02-22T13:45:22');
const date2 = new Date('2023-02-23T08:30:10');
const diff = date2.getTime() - date1.getTime(); // difference in milliseconds

Вычислите разницу между двумя датами в днях:

const date1 = new Date('2023-02-22T13:45:22');
const date2 = new Date('2023-02-26T08:30:10');
const diff = Math.round((date2.getTime() - date1.getTime()) / (1000 * 60 * 60 * 24)); // difference in days

Вычислите разницу между двумя временами в минутах:

const time1 = new Date();
const time2 = new Date();
time1.setHours(9, 30, 0); // set the time to 9:30 AM
time2.setHours(10, 45, 0); // set the time to 10:45 AM
const diff = Math.round((time2.getTime() - time1.getTime()) / (1000 * 60)); // difference in minutes

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

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

const date1 = new Date('2023-02-22T13:45:22');
const date2 = new Date('2023-03-22T08:30:10');
const diff = Math.round((date2.getTime() - date1.getTime()) / (1000 * 60 * 60 * 24 * 7)); // difference in weeks

В этом примере мы используем метод getTime(), чтобы получить разницу в миллисекундах, а затем делим на количество миллисекунд в неделе, чтобы получить разницу в неделях.

Проверьте, сколько времени прошло

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

Вычислите прошедшее время в миллисекундах:

const start = new Date();
// some long-running operation
const end = new Date();
const elapsed = end.getTime() - start.getTime(); // elapsed time in milliseconds

Вычислите прошедшее время в секундах:

const start = new Date();
// some long-running operation
const end = new Date();
const elapsed = Math.round((end.getTime() - start.getTime()) / 1000); // elapsed time in seconds

Вычислите прошедшее время в минутах:

const start = new Date();
// some long-running operation
const end = new Date();
const elapsed = Math.round((end.getTime() - start.getTime()) / (1000 * 60)); // elapsed time in minutes

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

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

const start = new Date();
// some short operation
const end = new Date();
const elapsed = end.getTime() - start.getTime(); // elapsed time in milliseconds
if (elapsed > 100) {
  console.log(`Operation took longer than expected: ${elapsed} ms`);
} else {
  console.log(`Operation completed in ${elapsed} ms`);
}

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

Как выполнить обработку обратного отсчета

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

Вот пример:

function countdown(seconds) {
  const interval = setInterval(() => {
    console.log(seconds);
    seconds--;
    if (seconds < 0) {
      clearInterval(interval);
      console.log('Countdown finished!');
    }
  }, 1000);
}

countdown(10); // start a 10-second countdown

В этом примере мы определяем функцию countdown(), которая принимает в качестве аргумента число секунд. Функция устанавливает интервал с помощью метода setInterval(), который вызывает анонимную функцию каждую секунду. Внутри функции мы записываем оставшееся количество секунд и уменьшаем счетчик. Если счетчик опускается ниже нуля, мы очищаем интервал с помощью метода clearInterval() и записываем в журнал сообщение об окончании отсчета.

Как отобразить аналоговые часы

Чтобы отобразить аналоговые часы с помощью JavaScript, вы можете использовать встроенный объект Date и элемент HTML canvas для рисования циферблата и стрелок. Вот пример:

<canvas id="clock" width="200" height="200"></canvas>.

Код JavaScript:

const canvas = document.getElementById('clock');
const context = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = canvas.width / 2 - 5;

function drawClock() {
  const date = new Date();
  const hours = date.getHours() % 12;
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  const hourAngle = (hours + minutes / 60) * 30 * Math.PI / 180;
  const minuteAngle = minutes * 6 * Math.PI / 180;
  const secondAngle = seconds * 6 * Math.PI / 180;
  
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  // Draw clock face
  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
  context.stroke();
  
  // Draw hour hand
  context.beginPath();
  context.moveTo(centerX, centerY);
  context.lineTo(centerX + Math.cos(hourAngle) * radius * 0.6, centerY + Math.sin(hourAngle) * radius * 0.6);
  context.stroke();
  
  // Draw minute hand
  context.beginPath();
  context.moveTo(centerX, centerY);
  context.lineTo(centerX + Math.cos(minuteAngle) * radius * 0.8, centerY + Math.sin(minuteAngle) * radius * 0.8);
  context.stroke();
  
  // Draw second hand
  context.beginPath();
  context.moveTo(centerX, centerY);
  context.lineTo(centerX + Math.cos(secondAngle) * radius * 0.9, centerY + Math.sin(secondAngle) * radius * 0.9);
  context.stroke();
}

setInterval(drawClock, 1000);

В этом примере мы используем элемент canvas для создания часов размером 200×200 пикселей. Затем мы используем метод getContext(), чтобы получить 2D контекст рендеринга для canvas, и определяем центральную точку и радиус циферблата часов.

Внутри функции drawClock() мы получаем текущую дату и извлекаем часы, минуты и секунды. Затем мы вычисляем угол каждой стрелки в радианах и используем функции cos() и sin() для вычисления конечных точек каждой стрелки. Мы используем метод clearRect(), чтобы очистить холст, а затем с помощью методов arc() и lineTo() рисуем циферблат и стрелки часов.

Наконец, с помощью метода setInterval() мы вызываем функцию drawClock() каждую секунду, чтобы часы обновлялись в режиме реального времени.

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

Итог:

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

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

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