DEV Community

Simple Analog Clock Using Html, CSS & Javascript

Foolish Developer on July 15, 2021

In this article I am going to show you how to make an analog clock using HTML CSS and JavaScript code. I have already designed many types of analog...

Read full post

Mayank K • Jul 15 '21

Beautiful

Foolish Developer • Jul 16 '21

Thank you

Eckehard • Jul 26 '21 • Edited

I rebuilt your beautiful clock in DML, just to see how compact code would be. Here is the complete website:

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <title>title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
  <style>
  </style>
</head>

<body>
  <script>  "use strict";
    const cx = 100, cy = 100;  // Radius
    const _clockstyle = "width: " + (2 * cx) + "px;  height: " + (2 * cy) + "px;"
      + "border: 7px solid #282828; background: #585858;"
      + "border-radius: 50%; margin: 50px;"
      + "box-shadow: -4px -4px 10px rgba(67,67,67,0.5), inset 4px 4px 10px rgba(0,0,0,0.5),"
      + "inset -4px -4px 10px rgba(67,67,67,0.5), 4px 4px 10px rgba(0,0,0,0.3);"

    sidiv("", _clockstyle)
    let c = canvas2D({ width: px(2 * cx), height: px(2 * cy) })
    c.ctx.lineCap = "round"
    unselectBase()

    // Paint anything radial
    function tick(color, width, angle, length, innerlength = 0) {
      function ls(length) { return length * Math.sin(angle / 180.0 * Math.PI) }
      function lc(length) { return -length * Math.cos(angle / 180.0 * Math.PI) }
      c.setLineType(width, color)
      c.line(cx + ls(innerlength), cy + lc(innerlength), cx + ls(length), cy + lc(length))
    }

    // Draw clock
    function drawClock() {
      c.clear()
      // Draw ticks
      for (let i = 0; i < 360; i += 30)
        if ((i % 90) == 0) tick("#1df52f", 5, i, 88, 70)
        else tick("#bdbdcb", 3, i, 88, 75)

      // draw hands
      let t = new Date();  // get time
      tick("#61afff", 5, t.getHours() * 30, 50)  // hour
      tick("#71afff", 2, t.getMinutes() * 6, 70)  // min
      tick("#ee791a", 2, t.getSeconds() * 6, 80)  // s

      // drwa center
      c.setFillStyle("#4d4b63")
      c.circle(cx, cy, 10, { fill: true })
    }
    drawClock()
    setInterval(drawClock, 1000)
  </script>
</body>

</html>

That´s all. For practical use it would be better to put the code into a separate class for convenience, which is pretty simple in DML.

Post edit: here it is: a working clock class, can be used as Webcomponent too...

Madza • Jul 16 '21

Very clean, both the ui and code 👍😉

Foolish Developer • Jul 16 '21

Thank you for like it

Comment deleted

Foolish Developer • Aug 27 '22

Esger Jellema • Jul 16 '21 • Edited

Your clock is very nice, though it can be done without the JavaScript too :) (not mine)
codepen.io/nobitagit/pen/birjo

Emeka Orji • Jul 17 '21

Yh! But that would not get the current time

Esger Jellema • Jul 18 '21

This one can, after setting it.. css-tricks.com/of-course-we-can-ma...

abskr82 • Jul 15 '21

Good explanation.

Foolish Developer • Jul 15 '21

Thank you

Abhay Sharma • Jul 15 '21

Crystal clear!

jfftck • Jul 16 '21

I have some suggestions on how to improve this.

Create a function that handles the redraw interval using window.requestAnimationFrame() and window.setTimeout() instead of window.setInterval() as it should cut down on rendering cycles.
Look at using HTML canvas as it will use much less memory since only 1 HTML element is created.

These are the ways that I would expand on this code to improve, not only performance, but my skill set.

Han Mai • Jul 16 '21

I doubt that.

How will requestAnimationFrame() help in this case? Interval resolution is 1 second.
Are there any measurements for this or you’ve just guessed?

Emeka Orji • Jul 16 '21

This is amazing!!

👍👍

Foolish Developer • Jul 16 '21

Thank you 😀😀😍

Emeka Orji • Jul 17 '21 • Edited

😍Amazingly, I found myself doing the same thing today. I built an Analog Clock! And I coded the whole thing on my android device.👌👌. Thanks man

Aya Bouchiha • Jul 15 '21

Amazing

Foolish Developer • Jul 16 '21

Thank you

Ahmad Rafsanjani • Jul 16 '21

Beautiful..
Btw 'SecondHand' distracted me😁

Foolish Developer • Jul 16 '21

😂😂😅

artydev • Jul 28 '21

Great :-)

luzhenqian • Jul 23 '21

Great! thank you for writing such a wonderful tutorial. Can I translate it and repost it to the developer community website in China?

Foolish Developer • Jul 23 '21

Of course

Ashutosh Mishra • Jul 21 '21

Your UI is very amazing and beautiful

Foolish Developer • Jul 21 '21

Thank you

nitesh603 • Jul 20 '21

Thank you!

Foolish Developer • Jul 20 '21

Welcome 😍

Comment hidden by post author - thread only accessible via permalink

Rentacar • Jul 18 '21

Thanking you from rentacarsbd.xyz
shiftingservice.xyz

Hossein_jafari • Jul 18 '21

lovely :)

CuriousHokie • Jul 16 '21

Very nice clock solution. Different from the clock solution on W3Schools: w3schools.com/graphics/canvas_cloc...

Bikash Mishra • Jul 17 '21

Good one!

Foolish Developer • Jul 17 '21

Thank you BIKASH MISHRA

Jeremiah • Jul 17 '21

Nice one. Thanks for sharing

Foolish Developer • Jul 17 '21

Welcome 😍

Salieu Sesay • Jul 16 '21

Excellent coding flow.

I wished all code supports are written as elegant as this.

Calvin Williams • Jul 16 '21

Wow

yogesh-kumar-27 • Jul 16 '21

learn a lot form this as a beginner

Foolish Developer • Jul 16 '21

Your comments have encouraged me to write more articles of this kind. Thank you 😍

EliseoGarcia1024 • Jul 16 '21

What time is it
Nice.

Foolish Developer • Jul 16 '21

Thank you 😍

Goest The Infor • Jul 17 '21

Dope 👌

Foolish Developer • Jul 17 '21

😍

JonathanThembo • Jul 25 '21

Thanks foolishdev., tho;
My clock is not starting, I have no clie why

aakashsingh1210 • Jul 17 '21

Wow

Foolish Developer • Jul 17 '21 • Edited

😍

Foolish Developer • Jul 16 '21

😍

Sujoy Dutta • Jul 18 '21

Thankyou, works like a charm. Smart idea and the neo look is awesome.

Foolish Developer • Jul 18 '21

Welcome 😍

Piyush Raj • Jul 23 '21

I followed along, but it gives me this error: javascript.js:10 Uncaught TypeError: Cannot read property 'style' of null
at setDate (javascript.js:10)
at javascript.js:23

Some comments have been hidden by the post's author - find out more