ちょっとアナログ時計を作成して見ましたが、以外と苦戦でした・・・。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="links/rule.css">
</head>
<body>
<center>
<div id="base">
<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
</div>
</div>
</center>
<script src="links/script.js"></script>
</body>
</html>
<!-- index.html -->
/* rule.css */
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lemonchiffon; /* #fffacd */
/*text-align: center;
margin-left: auto;
margin-right: auto;
width: 12em */
}
#base {
width: 300px;
height: 300px;
background-color: steelblue; /* #4682b4 */
/*text-align: center;*/
}
.clock {
width: 200px;
height: 200px;
background-color: whitesmoke; /* #f5f5f5 */
border-radius: 50%;
/*text-align: center;*/
position: relative;
top: 50px;
}
.hour-hand {
position: absolute;
background-color: blue; /* #696969 */
transform-origin: 50% 100%;
/* 回転の中心を下部に設定 */
width: 8px;
height: 60px;
top: 36px; /* (200/2)-(60+(8/2)) */
left: 96px; /* (200/2)-(8/2) */
}
.minute-hand {
position: absolute;
background-color: red; /* #696969 */
transform-origin: 50% 100%;
/* 回転の中心を下部に設定 */
width: 8px;
height: 80px;
top: 16px; /* (200/2)-(80+(8/2)) */
left: 96px; /* (200/2)-(8/2) */
}
/* rule.css */
/* script.js */
function updateClock() {
const now = new Date();
/* 現在の日付を定数に代入 */
const hours = now.getHours();
/* 現在の時（短針）を定数に代入 */
const minutes = now.getMinutes();
/* 現在の分（長針）を定数に代入 */
const hourHand =
document.querySelector('.hour-hand');
/* 現在の時を定数（短針）に代入 */
const minuteHand =
document.querySelector('.minute-hand');
/* 現在の分を定数（長針）に代入 */
const hourRotation = (360 / 12) * hours +
(360 / 12) * (minutes / 60);
const minuteRotation = (360 / 60) * minutes;
/* 短針、長針の回転数を設定 */
hourHand.style.transform =
`rotate(${hourRotation}deg)`;
minuteHand.style.transform =
`rotate(${minuteRotation}deg)`;
}
/* 短針、長針の回転角度を設定 */
setInterval(updateClock, 1000);
/* 指定時間（1秒）ごとに動作 */
updateClock(); // ページ読み込み時に初期表示
/* script.js */
起動した状態です。
実は完成後に針の位置設定が難しくで1週間掛かってしまいました。
