Introduction
Using a digital watch or timer on any website or web application is often necessary when we need to track time. But it is not at all a hard task to add a real-time watch on a website by just using vanilla js. Here we will be implementing a real-time digital clock using vanilla js. Though some sort of HTML and CSS will be used for rending the webpage, we will be particularly focusing on Javascript code.
Implementation
24 Hour clock using javascript
HTML file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Digital Watch</title>
</head>
<body>
<!-- representing time "HH:MM:SS" format.-->
<h1 id="time"></h1>
<!--linking the external JavaScript file -->
<script src="./script.js"></script>
</body>
</html>
Js file
setInterval(function(){
// GET TIME STRING
var time = getCurrentTime();
// Replace the current text
document.getElementById('time').innerText = time;
},1000);
function getCurrentTime(){
// getting the current time using Date() constructor
var dateObj = new Date();
// Serialise clock time
var time = {
hours:dateObj.getHours(),
minutes:dateObj.getMinutes(),
seconds:dateObj.getSeconds(),
}
// Prepend a 0 on the hours to make double digits
if(time.hours < 10){
time.hours = '0'+time.hours
}
// Prepend a 0 on the Minutes to make double digits
if(time.minutes < 10){
time.minutes = '0'+time.minutes
}
// Prepend a 0 on the Seconds to make double digits
if(time.seconds < 10){
time.seconds = '0'+time.seconds
}
// Formatting the clock time as a string "HH:MM:SS"
return time.hours + ':' + time.minutes + ':' + time.seconds + ' '
}
Explanation
In the above code, we have implemented getCurrentTime() which returns current time in HH:MM:SS format. This function uses Date() constructor which returns browser’s date along with time zone. But date object is static , so we need to keep on updating for getting current time at every instance. We have defined an object time with three properties - hours, minutes, seconds. We extract hours, minutes and seconds from dateObj using getHours(), getMinutes(), getSeconds() methods respectively.
If hours, minutes or seconds is a single digit number, we prepend 0 before that digit.
As the date object is static, we have used setInterval(function, milliseconds) for evaluating the getCurrentTime() function at the interval of every second (1000ms) to get the current time at every second.
12 Hour clock using javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Digital Watch</title>
</head>
<body>
<!-- representing time "HH:MM:SS" format.-->
<h1 id="time"></h1>
<!--linking the external JavaScript file -->
<script src="./script.js"></script>
</body>
</html>
setInterval(function(){
// GET TIME STRING
var time = getCurrentTime();
// Replace the current text
document.getElementById('time').innerText = time;
},1000);
function getCurrentTime(){
// getting the current time using Date() constructor
var dateObj = new Date();
// Serialise clock time
var time = {
hours:dateObj.getHours(),
minutes:dateObj.getMinutes(),
seconds:dateObj.getSeconds(),
session: 'AM'
}
if(time.hours > 12){
time.hours -= 12;
time.session = 'PM'
}
// Prepend a 0 on the hours to make double digits
if(time.hours < 10){
time.hours = '0'+time.hours
}
// Prepend a 0 on the Minutes to make double digits
if(time.minutes < 10){
time.minutes = '0'+time.minutes
}
// Prepend a 0 on the Seconds to make double digits
if(time.seconds < 10){
time.seconds = '0'+time.seconds
}
// Formatting the clock time as a string "HH:MM:SS"
return time.hours + ':' + time.minutes + ':' + time.seconds + ' ' + time.session
}
Explanation
To turn the 24-hour clock into a 12-hour clock, we need to subtract the hours' count from 12 if it is greater than 12 and another property session for displaying AM or PM.