Как спроектировать цифровые часы с помощью JavaScript?
Добавить в избранное
Часы — полезный элемент любого пользовательского интерфейса, если их правильно использовать. Часы можно использовать на сайтах, где время является главной проблемой, например, на некоторых сайтах бронирования или в некоторых приложениях, показывающих время прибытия поездов, автобусов, рейсов и т. д. Часы в основном бывают двух типов: аналоговые и цифровые. Будем думать над созданием цифрового.
Подход:
подход заключается в использовании объекта даты для получения времени каждую секунду, а затем повторном рендеринге времени в браузере с использованием нового времени, которое мы получили, вызывая одну и ту же функцию каждую секунду.
HTML-код: в этом разделе у нас есть фиктивное время в формате «ЧЧ:ММ:СС», заключенное в тег «div».
index.html
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Цифровые часы</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="clock">8:10:45</div>
<script src="js.js"></script>
</body>
</html>
Код CSS: для CSS мы просто выровняли наши часы по центру страницы. Помимо этого, это просто размер и ширина шрифта, которые вы можете настроить в соответствии с вашими потребностями.
style.css
font-size: 175px;
width: 900px;
margin: 200px;
text-align: center;
border: 2px solid black;
border-radius: 20px;
}
Код JavaScript: Для JavaScript выполните следующие шаги.
• Шаг 1: Создайте функцию «showTime».
• Шаг 2: Создайте экземпляр объекта Date .
• Шаг 3: Используя методы объекта Date , получите «часы», «минуты» и «секунды».
• Шаг 4: Установите AM/PM в зависимости от значения часа. Объект Date работает в 24-часовом формате, поэтому мы меняем час обратно на 1, когда он становится больше 12. AM/PM также изменяется в соответствии с этим.
• Шаг 5: Теперь создайте строку, используя тот же формат ЧЧ:ММ:СС, заменив значение часа, минуты и секунды значениями, которые мы получаем из методов объекта Date .
• Шаг 6: Теперь замените строковую переменную в «div», используя свойство innerHTML .
• Шаг 7: Чтобы вызывать функцию каждую секунду, используйте метод setInterval() и установите интервал времени 1000 мс, что равно 1 с.
• Шаг 8: Теперь вызовите функцию в конце, чтобы запустить функцию в точное время перезагрузки/рендеринга, так как setInterval() будет вызываться сначала через 1 с рендеринга.
Примечание. Вы можете использовать цифровые шрифты, доступные в Интернете, чтобы сделать часы более красивыми. Для этого вам нужно загрузить их файл в свой проект, а затем использовать свойство «font-face», чтобы использовать этот пользовательский шрифт.
js.js
function showTime() {
let time = new Date();
let hour = time.getHours();
let min = time.getMinutes();
let sec = time.getSeconds();
am_pm = "AM";
if (hour > 12) {
hour -= 12;
am_pm = "PM";
}
if (hour == 0) {
hr = 12;
am_pm = "AM";
}
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
let currentTime = hour + ":" + min + ":" + sec + am_pm;
document.querySelector("#clock").innerHTML = currentTime;
}
showTime();