Simple analog clock using arcs
Simple analog clock using arcs.
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 = 120 * Math.cos( n * (Math.PI/6) )
48 y = 120 * 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
60 var date = new Date()
61
62 var hour = date.getHours() % 12
63 var minutes = date.getMinutes()
64 var seconds = date.getSeconds()
65
66 // hour
67 clock.beginPath()
68 clock.strokeStyle = "#311b92"
69 clock.lineWidth = 10
70 clock.arc(150, 150, 70, -(Math.PI/2), hour * (Math.PI / 6) -(Math.PI/2) )
71 clock.stroke()
72
73 // minutes
74 clock.beginPath()
75 clock.strokeStyle = "#1e88e5"
76 clock.lineWidth = 10
77 clock.arc(150, 150, 85, -(Math.PI/2), minutes * (Math.PI / 30 ) -(Math.PI/2) )
78 clock.stroke()
79
80 // seconds
81 clock.beginPath()
82 clock.strokeStyle = "#d81b60"
83 clock.lineWidth = 10
84 clock.arc(150, 150, 100, -(Math.PI/2), seconds * (Math.PI / 30 ) -(Math.PI/2) )
85 clock.stroke()
86
87 document.getElementById("time").innerText = hour+":"+minutes+":"+seconds
88 }
89
90 setInterval( draw, 1000 )
91 </script>
92 </body>
93 </html>
