как в javascript отобразить время в формате 12 часов

В JavaScript, чтобы отобразить время в 12-часовом формате, нам нужно сначала получить текущее время, а затем форматировать его соответствующим образом. Вот пошаговое руководство:

Шаг 1: Получение текущего времени

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

const now = new Date();

Шаг 2: Извлечение компонентов времени

Далее, извлекаем часы, минуты и секунды с помощью методов объекта Date:

let hours = now.getHours(); // Получаем часы (0-23)
let minutes = now.getMinutes(); // Получаем минуты (0-59)
let seconds = now.getSeconds(); // Получаем секунды (0-59)

Шаг 3: Преобразование в 12-часовой формат

Чтобы преобразовать 24-часовой формат в 12-часовой, мы используем простую логику:

• Если часы больше 12, вычитаем 12 из них (выставляем на формат AM/PM).
• Вводим AM или PM в зависимости от значения часов.

const isAm = hours < 12; // Проверяем, утро это или вечер
hours = hours % 12; // Преобразуем в 12-часовой формат
hours = hours ? hours : 12; // Если hours равен 0, заменяем на 12

Шаг 4: Форматирование минут и секунд

Чтобы убедиться, что минуты и секунды всегда имеют два знака, мы можем использовать метод .padStart(), добавляя ведущий ноль при необходимости:

minutes = String(minutes).padStart(2, '0');
seconds = String(seconds).padStart(2, '0');

Шаг 5: Составление окончательной строки

Теперь мы можем собрать все части воедино и вывести результат:

const timeString = `${hours}:${minutes}:${seconds} ${isAm ? 'AM' : 'PM'}`;
console.log(timeString);

Полный код

Вот полный пример кода для отображения текущего времени в 12-часовом формате:

function displayTimeIn12HourFormat() {
    const now = new Date();

    let hours = now.getHours();
    let minutes = now.getMinutes();
    let seconds = now.getSeconds();

    const isAm = hours < 12;
    hours = hours % 12;
    hours = hours ? hours : 12; // заменяем 0 на 12

    minutes = String(minutes).padStart(2, '0');
    seconds = String(seconds).padStart(2, '0');

    const timeString = `${hours}:${minutes}:${seconds} ${isAm ? 'AM' : 'PM'}`;
    console.log(timeString);
}

// Вызываем функцию
displayTimeIn12HourFormat();

Заключение

Этот код успешно отображает текущее время в 12-часовом формате с учетом AM и PM. Вы можете модифицировать его, например, добавив возможность обновления времени каждую секунду с помощью setInterval, если это необходимо.

Использование Intl.DateTimeFormat (современный подход)

Если вы хотите упростить работу с форматированием времени, вы можете использовать встроенный объект Intl.DateTimeFormat:

const options = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true };
const timeFormatter = new Intl.DateTimeFormat('en-US', options);
console.log(timeFormatter.format(now));

Этот подход более предпочтителен, поскольку избавляет вас от необходимости вручную управлять форматированием времени.