Choose from clock radios and digital clocks in a range of colors that not only wake you up but also blend in with your existing decor. These clocks have built-in features like a stopwatch, buzzer, USB port, radio, alert tabs as well as a snooze button.
Digital clocks can be used to tell time at a glance. They became quickly more popular than the older sweep hand clocks, now known as analog clocks. The time derived by analog clocks came from either a pendulum or a spring. Description A simple digital clock with multiple configuration possibilities. The application works in portrait and in landscape mode and will adjust to the screen size. The settings you can alter are: - Displaying seconds or not - Clock background color - Color of the numbers - The font of the numbers. Description A simple digital clock with multiple configuration possibilities. The application works in portrait and in landscape mode and will adjust to the screen size. The settings you can alter are: - Displaying seconds or not - Clock background color - Color of the numbers - The font of the numbers.
In this post, you will learn how to create a Digital Clock in 24-hour and 12-hour formats using JavaScript.
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.
HTML
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.
CSS
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.
/cdn.vox-cdn.com/uploads/chorus_asset/file/22002874/dseifert_201030_4273_0005.0.jpg "The")
JS
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.
JS
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.
JS
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.
JS
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.
HTML
Fill In The Digital Clock Template
The Styling
Style the clock in the same way as done for the previous clock.
CSS
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.
JS
Digital Clock To The Hour Worksheets
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.
JS
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.
Big Digital Clock
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.
JS
Introduction
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.
JS
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.
JS
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.
JS
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.
JS
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.
HTML
Fill In The Digital Clock Template
The Styling
Style the clock in the same way as done for the previous clock.
CSS
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.
JS
Digital Clock To The Hour Worksheets
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.
JS
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.
Big Digital Clock
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.
JS
Introduction
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.
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
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
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.
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.
