Часы 24-го
Полутрадиционные деньрожденные часики почему бы не сделать в этот раз на картинках, такое лепится быстро, да попробовать выдвинуться на пляж.
Увидеть картинки и код отдельным файлом .html можно далее. В стиле предполагается, что картинки находятся в той же папке, что файл скрипта.
циферблат, png с прозрачным фоном (clock-bg.png)
часовая стрелка, просто она белая :) (hour-hand.png)
минутная стрелка (minute-hand.png)
секундная стрелка (second-hand.png)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Часы 24</title>
<style>
.wrapper {
width: 350px;
height: 350px;
margin: 0 auto;
position: relative;
background: url('./clock-bg.png');
background-size: cover;
background-position: 50% 50%;
}
.hour-hand {
background-image: url('./hour-hand.png');
position: absolute;
top: 49%;
left: 175px;
width: 72px;
height: 8px;
transform-origin: left;
}
.min-hand {
background-image: url('./minute-hand.png');
position: absolute;
top: 50.5%;
left: 173px;
width: 8px;
height: 96px;
transform-origin: top;
transform: rotate(180deg);
}
.sec-hand {
background-image: url('./second-hand.png');
position: absolute;
top: 50%;
left: 168px;
width: 12px;
height: 126px;
transform-origin: top;
}
</style>
</head><body>
<div class="wrapper">
<div class="clock-wrapper">
<div class="hour-hand" id="hour"></div>
<div class="min-hand" id="min"></div>
<div class="sec-hand hand" id="sec"></div>
</div>
</div>
<script>
(function() {
let hour = document.getElementById("hour");
let min = document.getElementById("min");
let sec = document.getElementById("sec");
function getHour() {
let d = new Date();
let _hour = d.getHours() * 30 + d.getMinutes() * 0.5 + d.getSeconds() * 0.5/60;
let hourmove = _hour - 90;
hour.style.transform = `rotate(${hourmove}deg)`;
}
function getMinute() {
let d = new Date();
let minute = d.getMinutes() * 6 + d.getSeconds() * 0.1;
let minutemove = minute + 180;
min.style.transform = `rotate(${minutemove}deg)`;
}
function getSecond() {
let d = new Date();
let second = d.getSeconds() * 6;
let secondmove = second + 180;
sec.style.transform = `rotate(${secondmove}deg)`;
}
getHour();
getMinute();
getSecond();
setInterval(getHour, 1000);
setInterval(getMinute, 1000);
setInterval(getSecond, 1000);
}());
</script>
<noscript>
<p>Включите Javascript в браузере для работы приложения.</p>
</noscript>
</body>
</html>
P.S. Почему делений 72, а не 60, см. в комментах. Если вам хочется более традиционный циферблат, скачайте этот файл clock-bg.png и используйте его вместо оригинального:
Фон часов clock-bg.png с традиционной разбивкой на 60 делений (30 Кб)
23.05.2024, 11:12 [275 просмотров]