Как создать аналоговые часы с помощью HTML CSS и JavaScript.
Всем Привет. В этом видео мы сделаем работающие аналоговые часы с помощью HTML CSS и jаvascript. Надеюсь, это видео будет вам полезно. Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом по ссылке, указанной ниже.. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
В архиве находится:
- Все демонстрационные изображения,
- Исходные файлы HTML,
- Исходные файлы CSS,
- Исходные файлы jаvascript,
- Иконки шрифтов,
- Файлы библиотеки и плагинов,
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Analog Clock - jаvascript</title>
<!--css file-->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="clock">
<div class="hour hand"></div>
<div class="minute hand"></div>
<div class="seconds hand"></div>
<img src="clock.svg" alt="" />
</div>
<script src="app.js"></script>
</body>
</html>CSS КОД:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: #16191e;
}
.clock {
height: 320px;
width: 320px;
/* background: red; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 15px solid #242931;
box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.2),
inset 0 0 30px rgba(0, 0, 0, 0.4);
box-sizing: content-box;
}
.hand {
height: 60px;
width: 10px;
background: #fff;
position: absolute;
left: 0;
right: 0;
top: 100px;
border-radius: 5px;
margin: auto;
transform-origin: bottom;
}
.minute {
height: 80px;
width: 5px;
top: 80px;
}
.seconds {
height: 90px;
width: 3px;
top: 70px;
background: #ff0000;
}
img {
position: relative;
}
jаvascript КОД:
let hrHand = document.querySelector(".hour");
let minHand = document.querySelector(".minute");
let secHand = document.querySelector(".seconds");
let time = setInterval(() => {
let date = new Date();
let hr = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
let hrDeg = hr * 30 + min / 2;
let minDeg = min * 6 + sec / 10;
let secDeg = sec * 6;
hrHand.style.transform = `rotate(${hrDeg}deg)`;
minHand.style.transform = `rotate(${minDeg}deg)`;
secHand.style.transform = `rotate(${secDeg}deg)`;
}, 1000);
