Building a digital clock using JavaScript is a great way to learn more about the language and how to create dynamic, interactive elements for your website or web application. In this tutorial, we will review the steps for creating a simple digital clock for a website using JavaScript, HTML, and CSS.
Building a digital clock using JavaScript is simple for both advanced and beginners. This article will cater to you if you are learning JavaScript and practicing it by building a digital clock or if you want to implement it on your website.
In this article, we will build a 12-hour clock, and a 24-hour clock and learn to add Date to it. We will use the Date object to get time every second and then update the function each second.
Table of Contents
Digital Clock using JavaScript
To start, we need an HTML page in which we will add an <div> element where to target with JavaScript and display the clock. This element should have a unique ID, such as “clock”, so you can access it in your JavaScript code.
<div id="clock" onload="currentTime()"></div>Next, we need to create a JavaScript function that will be responsible for updating the clock. In this function, we will use the Date object to get the current time and then update the innerHTML of the <div> element with the ID clock with the formatted time.
To do this, we first need to create variables for the current hours, minutes, and seconds. We can get these values using the Date object’s getHours(), getMinutes(), and getSeconds() methods.
Next, we will need to format these values into a string that will be displayed on the clock. This can be done using string concatenation and conditional statements to add leading zeros to single-digit values.
Once we have formatted the time string, we can use the innerHTML property of the clock <div> to set its value to the current time. This will update the clock display whenever the function is called.
This clock shows time taking account of the user’s time zone.
12 Hour Clock
24 Hour Clock
12-Hour Clock Code
First, we need an HTML container to set a location where the time will be displayed on the webpage.
<div id="clock" onload="currentTime()"></div>Explanation: We have used 'div' as a container, this will help us display the clock as a separate block on the webpage. We can use 'span' if we want to use it inline. This also sets the potion where the clock will be displayed.
We can add a bit of CSS to beautify the clock. We will set a background, and border, align it to the center, and a little padding, font size, and color. Please feel free to customize it according to your needs.
#clock {
font-size: 36px;
color: #fff;
text-align: center;
background: #111;
padding: 18px 16px;
border-radius:6px
border: 8px solid #F2E34C;
}Now let's do the JavaScript magic using functions and some basic objects.
<script>
function clock () {
let date = new Date();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
let ampm = 'AM';
if(h > 12){
h = h - 12;
ampm = "PM";
}
if (h == 0) {
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
let time = h + ":" + m + ":" + s + " " + ampm;
document.getElementById("clock").innerText = time;
let t = setInterval(clock, 1000);
}
clock();
</script>Javascript Explanation 12 hours
The first thing we do is create a function using the following code " function clock () {code inside}".
A function is defined using the function keyword, followed by a name that describes what the function does, and a set of parentheses () that may include parameters. The code to be executed when the function is called is placed within curly braces {}.
Understanding the code inside the curly brackets:
let date = new Date();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();The 'let' command is used to declare a variable in JavaScript (can read about let more here). We used the date as our variable name, which can be anything you like, followed by the 'new Date()' object which is used to create a new date object with the current date and time.
In the Date article, you can find getHours, getMinutes, and getSeconds methods which help us extract Hours, Minutes, and Seconds from the date variable and assign them to new variables h, m, and s respectively.
Now we need to create a new variable ampm to show 'AM' before 12 noon and 'PM' after that.
let ampm = 'AM';
if(h > 12){
h = h - 12;
ampm = "PM";
}
if (h == 0) {
h = 12;
}Second, if statements help in converting time into 12 hours format.
Values of the hour, minute, and second need to be formatted so that they display time in a consistent way (03:30:09 AM and not 3:30:9 AM ).
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;Now we need to assign all the variables to a new variable, which we will call 'time'. The wee will pass this time variable to the HTML using 'document.getElementById("clock").innerText = time;'.
let time = h + ":" + m + ":" + s + " " + ampm;
document.getElementById("clock").innerText = time;
let t = setInterval(clock, 1000);
}
clock();Variable 't' helps us update the time every 1000 milliseconds (1 second) and at the last, we call our clock function using clock().
24-Hour Clock Code
HTML container to set a location where the time will be displayed on the webpage.
<div id="clock24" onload="currentTime()"></div>We need a different ID clock24 for this container as IDs are unique.
#clock24 {
font-size: 36px;
color: #fff;
text-align: center;
background: #111;
padding: 18px 16px;
border-radius:6px
border: 8px solid #F2E34C;
}JavaScript code for the 24-hour clock.
<script>
function clock24 () {
let date = new Date();
let h24 = date.getHours();
let m24 = date.getMinutes();
let s24 = date.getSeconds();
h24 = (h24 < 10) ? "0" + h24 : h24;
m24 = (m24 < 10) ? "0" + m24 : m24;
s24 = (s24 < 10) ? "0" + s24 : s24;
let time24 = h24 + ":" + m24 + ":" + s24;
document.getElementById("clock24").innerText = time24;
let t24 = setInterval(clock24, 1000);
}
clock24();
</script>Javascript Explanation 24 hours
We will create a new function using the following code " function clock24 () {code inside}".
The following code is the same as the 12-hour clock as explained above.
let date = new Date();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();Values of the hour, minute, and second need to be formatted so that they display time in a consistent way (03:30:09 AM and not 3:30:9 AM ).
h24 = (h24 < 10) ? "0" + h24 : h24;
m24 = (m24 < 10) ? "0" + m24 : m24;
s24 = (s24 < 10) ? "0" + s24 : s24;Now we need to assign all the variables to a new variable, which we will call 'time24'. Then we will pass this time24 variable to the HTML using 'document.getElementById("clock24").innerText = time24;'.
let time24 = h24 + ":" + m24 + ":" + s24;
document.getElementById("clock24").innerText = time24;
let t24 = setInterval(clock24, 1000);
}
clock24();Variable 't24' helps us update the time every 1000 milliseconds (1 second) and at the last, we call our clock function using clock24().
Javascript Digital Clock with Date
Clock with Date
<div id="clockdate" onload="currentTime()"></div>
<div id="date"></div><script>
function clock () {
let date = new Date();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
let ampm = 'AM';
if(h > 12){
h = h - 12;
ampm = "PM";
}
if (h == 0) {
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
let time = h + ":" + m + ":" + s + " " + ampm;
document.getElementById("clockdate").innerText = time;
let t = setInterval(clock, 1000);
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var curWeekDay = days[date.getDay()];
var curDay = date.getDate();
var curMonth = months[date.getMonth()];
var curYear = date.getFullYear();
var curdate = curWeekDay+", "+curDay+" "+curMonth+" "+curYear;
document.getElementById("date").innerHTML = curdate;
}
clock();
</script>
Leave a Reply