The Digital Clock

In this post, you will learn how to create a Digital Clock in 24-hour and 12-hour formats using JavaScript.

  1. Jumbo Display Digital Clock
  2. How To Get The Digital Clock On Macbook
  3. Digital Wall Clocks

These clocks have built-in features like a stopwatch, buzzer, USB port, radio, alert tabs as well as a snooze button. Look through a collection of digital clocks with a wake-up light and easy-to-read numbers so you’ll know if you have time to snooze.or not! Choose from a wide range of clocks in a variety of colors and designs. A Free Online Digital Clock! Free, Easy To Use LARGE Full Screen Online Digital Clock!

In the 24-hour format, time is displayed in the form of HH : MM : SS. In the 12-hour format, it is displayed in the form of HH : MM : SS AM/PM.

# Digital Clock in 24-Hour format

See the Pen Digital Clock by Aakhya Singh (@aakhya) on CodePen.

Let's start with the HTML.

The Structure

To begin with, create a div with id clock in which you want to display time. We will insert the time into this div using JavaScript.


The Styling

The styling for the text to be displayed in the div is defined in the CSS.

The text is given a font size and color. Its font family is chosen as Orbitronbecause it gives the look of a real digital clock. The body is given a dark background color and the text is center aligned.


The Scrypting

Now here comes the main part. The entire code for the working of the clock is written within the currentTime() function.

Inside this function, an object of the Date Class is created which allows you to call year, date, hour, minute, second and millisecond.

In our code, this object is used for getting the current hours, minutes and seconds which are stored in different variables.


The obtained hours, minutes and seconds will be displayed in single digit if less than 10. For example, the current hour will be displayed as 7 instead of 07. To always display the elements of time in two-digit format, a 0 is appended before them whenever they are less than 10 using the updateTime() method.


Now once our time is ready, let's display it in the div which we made before. This is done by obtaining the div using the document.getElementById method and give our time as the content of the div using the innerHTML property.


To start the timer, setTimeout() method is used which takes the function currentTime() as the first argument and the time (in milliseconds) after which you wish to call the function as the second argument. In our case, the function is called after every 1000 milliseconds.

Finally, the currentTime() function is called to initiate the whole process.


So congratulations, you have just created a digital clock.


# Digital Clock in 12-Hour format

See the Pen Digital Clock by Aakhya Singh (@aakhya) on CodePen.

The HTML and CSS for 12-hour format will remain the same as in the previous case.

The Structure

Create a div to display time as done for the previous clock.


The Styling

Style the clock in the same way as done for the previous clock.


The Scrypting

The JavaScript code will have some extra lines in addition to the code created for the previous clock. The code for the digital clock in 24-hour format is shown below.


Now we have to add just three more lines of code and our clock will be ready.

A variable named midday is created and an initial value of 'AM' is assigned to it. This variable will be used to store 'AM' or 'PM'.

Further, ternary operator is used to give the value 'PM' to the variable middayif the number of hours is greater than or equal to 12 and 'AM' otherwise.


In order to display time in 12-hour format, the number of hours should not be greater than 12. Therefore, 12 is deducted from the number of hours if it is greater than 12.

Also, the 24-hour format of 00 : 01 : 23 at midnight should be displayed as 12 : 01 : 23 AM in the 12-hour format. For this, the number of hours 00 is replaced by 12.

The first digital clock



The clock for learning time has movable hands. It has three main modes, the first demonstrates how to tell the time using an analogue clock. The second mode uses the the clock hands as a way of learning angles. The third mode uses the clock as a way to help understand fractions. The clocked can be altered to change colors and its overall styling. Note in this activity different controls are shown depending on the current mode

Common Controls

The controls above the mode selector are always displayed. At the top you will see a digital clock, below are three buttons. Click the 12 button to display in normal 12 hour format with AM/PM. Click 24 button to change to the 24 hour format. Often you won't want to display the time at all, click off and the digital clock will disappear.

The clock can be used to display the current time (based on the clock of the computer you are using). Click the real time to toggle this feature. This is useful as children can observe how the clock changes throughout the day. For random time problems click the random button and the clock hands will spin to produce a random time. So this is great for lots of quick fire questions.

Jumbo Display Digital Clock

When the clock is not showing the actual real time, then small handles appear at the end of the hands, these and dragged into position.

Time mode controls.

First select time mode, below are a set of controls. These can be used in time problems or to view how much time has elapsed when showing the actual real time. The first one displays the hours passed. The second one the minutes that have passed. Underneath reset button sets both back to zero.

So a brief example of how to use them would be click random time. Now ask what the class what time will be in say 1hour and 25 minutes. To demonstrate this click reset, so both minutes and hours are zero. Now drag the clock hand forward until the hours is 1 and the minutes is 25. The clock now displays the answer to the initial problem.

Angles mode

Clocks have always been a useful way to teach about angles. This clock has angle measurements built in. First set the mode to angles, to get the control set.

In angles mode you will now see a protractor button click it to toggle the display of the protractor. Next is the auto toggle button, click to turn it on and you will notice the protractor lines up automatically to measure the angle. Move the clock hands and the protractor will follow. Below the protractor button is a slider use this to change the size of the protractor. When measuring angles the large clock hands can be made thin for better accuracy by clicking thin. To display the angle click Ang, and click Arc to display the angle arc. When dragging the minute hand it currently snaps to the nearest minute, turn this feature off by clicking snap. Finally the type of angle can be changed using the select control. So you can choose the angle between the hour hand and minute hand, both clockwise and anti-clockwise. Or measure the angle of the second hand from 12 o'clock. This works very well with the realtime setting as children can see a full angle of 360° turned every minute. This helps learning of key angles such as 0°, 90°, 270° etc. Also conversions such as 30 secs * 6 = 180°

Fractions mode


Select fraction on the mode control to use the clock to teach fractions. Time statements such as 'a quarter past', 'half past' and 'a quarter to' obviously are linked to fraction.

In the fraction mode a circle sector is painted from 12 o'clock to the minute hand position. Two large fractions are displayed the fraction of an hour shows the unsimplified fraction of minutes÷60. The simplified fraction is the same fraction cancelled down when possible.

The simple button toggles removal of the hour and second hands to give a simplified view. You can also click thin to toggle the thinner clock hands. The clock is divided according to the divider lines control. The default setting is auto, this divides the clock according to the fraction displayed. Essentially the clock is divided depending on the simplified fraction. However you can turn off auto mode and divide the clock according to the number selected.

Percentages can also be shown by clicking to toggle the percentage display.

Styling the Clock

How To Get The Digital Clock On Macbook

Select the style mode to access controls. So for example to change the colour of the numbers, click numbers followed by a colour from the colourpicker. To remove the numbers completely click 'X' in the colour picker. You can do this with other parts of the clock too, which obviously can make reading the clock more difficult.

Related activities

The Digital Clock

Further lessons on the telling the time involve comparison of two different times the two clocks activity is excellent in this regard and can also generate time questions.

Digital Wall Clocks

To expand on the angles try Basic angles which can be used to examine types of angles such as acute,obtuse and reflex. It can also so be used to create many different types of random angle problems.

Having seen a circular fraction in this activity, the interactive fraction wall can also be used for further teaching of fractions.