В этой статье мы узнаем, как сделать простые цифровые часы.

Предпосылки

  • 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

Я надеюсь, что это поможет вам создать цифровые часы и понять их код. Спасибо.