В этой статье мы узнаем, как сделать простые цифровые часы.
Предпосылки
- HTML
- CSS
- Основы JavaScript и немного DOM
HTML
Начнем с части HTML.
Итак, чтобы отобразить время, давайте создадим div и создадим четыре элемента span для отображения часов, минут, секунд и сеанса (AM или PM). Дайте каждому промежутку идентификатор, как показано в коде ниже.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="digital.css"> <script src="digital.js"></script> </head> <body> <div class="container"> <span id="hours">00</span> <span>:</span> <span id="minutes">00</span> <span>:</span> <span id="seconds">00</span> <span id="session"></span> </div> </body> </html>
Вот как это будет выглядеть.
CSS
Давайте придадим ему стиль с помощью CSS.
*{ margin: 0; border: 0; box-sizing: border-box; } body{ overflow: hidden; background-color: antiquewhite; } .container{ color: blue; position: absolute; font-weight: bold; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 6rem; display: flex; flex-direction: row; justify-content: space-around; } span{ padding: 1.2rem; }
Вот как это будет выглядеть.
JavaScript
Теперь давайте заставим часы работать с базовым JavaScript.
Давайте сначала определим функцию, назовем ее displayTime(). Внутри функции мы получим текущую дату и время, используя объект «new Date()», который назначается переменной с именем dateTime.
Теперь давайте получим часы, минуты и секунды из объекта Date, используя «dateTime.getHours()» для текущего часа, «dateTime.getMinutes()» для текущей минуты и «dateTime.getSeconds()» для получения секунд. .
function displayTime(){ var dateTime = new Date(); var hrs = dateTime.getHours(); var min = dateTime.getMinutes(); var seconds = dateTime.getSeconds(); }
Теперь давайте объявим переменную с именем «session», значением по умолчанию которой является «AM».
Также с помощью оператора if-else мы установим сеанс «AM» или «PM» в зависимости от времени. Если часы больше или равны 12 , это AM, иначе PM. Если часы равны 0, мы установим 12.
var session = "AM"; if(hrs >= 12){ session = "PM"; if (hrs > 12) { hrs = hrs - 12; } } if(hrs == 0){ hrs = 12; }
В приведенном ниже коде отображаются ведущие нули для минут и секунд, если они меньше 10.
if(min < 10) { min = "0" + min; } if(seconds < 10) { seconds = "0" + seconds; }
Теперь внутри той же функции мы выберем элементы HTML, используя «document.getElementById», а затем обновим содержимое до текущих часов, минут и секунд, используя «.innerHTML=» ««.
document.getElementById('hours').innerHTML = hrs; document.getElementById('minutes').innerHTML = min; document.getElementById('seconds').innerHTML = seconds; document.getElementById("session").innerHTML = session;
Теперь мы вызовем функцию с помощью setInterval().
setInterval(displayTime, 10);
Этот код использует метод setInterval() для многократного вызова функции displayTime с заданным интервалом в 10 миллисекунд.
Итак, вот полный код JS.
function displayTime(){ var dateTime = new Date(); var hrs = dateTime.getHours(); var min = dateTime.getMinutes(); var seconds = dateTime.getSeconds(); var session = "AM"; if(hrs >= 12){ session = "PM"; if (hrs > 12) { hrs = hrs - 12; } } if(hrs == 0){ hrs = 12; } if(min < 10) { min = "0" + min; } if(seconds < 10) { seconds = "0" + seconds; } document.getElementById('hours').innerHTML = hrs; document.getElementById('minutes').innerHTML = min; document.getElementById('seconds').innerHTML = seconds; document.getElementById("session").innerHTML = session; } setInterval(displayTime, 10);
Ссылка на КодПен:
https://codepen.io/venky-17__/pen/PodxZgQ
Я надеюсь, что это поможет вам создать цифровые часы и понять их код. Спасибо.