AnalogClock/index.html at main · RaselJam/AnalogClock · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="style.css" />
		<title>Document</title>
	</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 type="text/javascript">
			const deg = 6
			const hr = document.querySelector('#hr')
			const mn = document.querySelector('#mn')
			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)`
			}, 1000)
		</script>
	</body>
</html>