Simple analog clock written in Javascript
Analog clock with complete hour hand, minutes hand and seconds hand.
HTML
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <title>Analog Clock</title>
6 <style>
7 * {
8 padding: 0;
9 margin: 0;
10 }
11 .container {
12 width: 100vw;
13 height: 100vh;
14 display: flex;
15 flex-direction: column;
16 justify-content: flex-start;
17 align-items: center;
18 }
19 #clock {
20 margin-top: 40px;
21 }
22 #time {
23 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
24 font-size: 1.5rem;
25 font-weight: bold;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="container">
31 <canvas id="clock" width="300" height="300"></canvas>
32 <span id="time">00:00:00</span>
33 </div>
34
35 <script>
36 const box = document.getElementById("clock")
37 const clock = box.getContext("2d")
38
39 function draw()
40 {
41 clock.fillStyle = "#fff"
42 clock.fillRect(0, 0, box.width, box.height)
43
44 let x, y, n
45
46 for( n=1; n<=12; n++ ) {
47 x = 130 * Math.cos( n * (Math.PI/6) )
48 y = 130 * Math.sin( n * (Math.PI/6) )
49
50 x += 150
51 y += 150
52
53 clock.beginPath()
54 clock.fillStyle = "#311b92"
55 clock.arc(x, y, 3, 0, 2*Math.PI)
56 clock.fill()
57 }
58
59 var date = new Date()
60
61 var hour = date.getHours() % 12
62 var minutes = date.getMinutes()
63 var seconds = date.getSeconds()
64
65 var hourAngle = hour * ( Math.PI / 6) - ( Math.PI/2 )
66 var minAngle = minutes * ( Math.PI / 30 ) - ( Math.PI/2 )
67 var secAngle = seconds * ( Math.PI / 30 ) - ( Math.PI/2 )
68
69 drawHand(hourAngle, 80, 7, "#311b92")
70 drawHand(minAngle, 100, 4, "#1e88e5")
71 drawHand(secAngle, 110, 2, "#d81b60")
72
73 clock.beginPath()
74 clock.fillStyle = "#000"
75 clock.arc(150, 150, 8, 0, 2*Math.PI)
76 clock.fill()
77
78 document.getElementById("time").innerText = hour+":"+minutes+":"+seconds
79 }
80
81 function drawHand( angle, length, width, color ) {
82 var x, y
83
84 x = length * Math.cos( angle )
85 y = length * Math.sin( angle )
86
87 x += 150
88 y += 150
89
90 clock.beginPath()
91 clock.strokeStyle = color
92 clock.lineWidth = width
93 clock.moveTo(150, 150)
94 clock.lineTo( x, y )
95 clock.stroke()
96 }
97
98 setInterval( draw, 1000 )
99 </script>
100 </body>
101 </html>
