Аналоговые часы на JavaScript

Всем привет! В этой статье я расскажу, как сделать рабочие аналоговые часы на JavaScript.

Вот такие:

Посмотреть результат

Научившись делать такие часы Вы сможете написать для себя аналоговые часы с любым дизайном.

В нашем проекте нужны следующие файлы:

Чтобы скачать нужный фаил нажмите на него.

index.html – файл с необходимой разметкой
style.css – файл стилей наших часиков
script.js – файл с функционалом наших часов
clock.png – циферблат
js.png – картинка для оформление циферблата

Содержание файлов проекта часы на JavaScript:

index.html

<!DOCTYPE html>
<html lang="en">
<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 class="clock">
    <div class="hour">
        <div class="hr" id="hr"></div>
    </div>
    <div class="min">
        <div class="mn" id="mn"></div>
    </div>
    <div class="sec">
        <div class="sc" id="sc"></div>
    </div>
</div>


    <script src="script.js"></script>

</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #091921;
}

.clock{
    width: 350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(clock.png),
    url(js.png),
    radial-gradient(circle, rgb(37, 73, 90) 0%, rgb(25, 48, 60) 11%, rgba(9,25,33,1) 38%);
    background-size: cover;
    border-radius: 50%;
    box-shadow: 0 -15px 15px rgba(134, 134, 134, 0.35),
    inset 0 -15px 15px #191919,
    0 15px 15px rgba(134, 134, 134, 0.35),
    inset 0 15px 15px #191919
    ;
}

.clock:before{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: #ffffff;
    border-radius: 50%;
    z-index: 999;
}

.clock .hour,
.clock .min,
.clock .sec{
    position: absolute;
}

.clock .hour, .hr{
    width: 160px;
    height: 160px;
}
.clock .min, .mn{
    width: 190px;
    height: 190px;
}
.clock .sec, .sc{
    width: 230px;
    height: 230px;
}

.hr, .mn, .sc{
    display: flex;
    justify-content: center;
    position: absolute;
    border-radius: 50%;
}

.hr:before{
    content: '';
    position: absolute;
    width: 8px;
    height: 80px;
    background-color: #ffc600;
    z-index: 10;
    border-radius: 6px 6px 0 0;
}
.mn:before{
    content: '';
    position: absolute;
    width: 4px;
    height: 90px;
    background-color: #fff;
    z-index: 11;
    border-radius: 6px 6px 0 0;
}
.sc:before{
    content: '';
    position: absolute;
    width: 2px;
    height: 150px;
    background-color: #fff;
    z-index: 12;
    border-radius: 6px 6px 0 0;
}

script.js

const deg = 6;
const hr = document.querySelector('#hr');
const sc = document.querySelector('#sc');

setInterval(() => {
    let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;

hr.style.transform = `rotateZ(${(hh) + (mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
})

Рабочий результат часов на JavaScript

See the Pen vYOaqEr by AntonAniskovich (@AntonAniskovich) on CodePen.

Видео с пошаговой инструкцией как сделать рабочие аналоговые часы на JavaScript

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