How to Create a simple Digital Clock using JavaScript with 12 hr time format
In this example we will use two files timer.html and timer.js file to display digital clock in JavaScript in 12hr format. If you want to use it for 24 hr that can also be done with just small change explained in code and example below.
To start with create one .html file with code below. I have named it timer.html however you can use any other name. Once created insert below .html code on that file and save. You need to include .js file on head tag which we will use to display the current time “<script src=”timer.js”></script>“. You can also add .css to beautify the display of clock.
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Clock</title>
<script src=”timer.js”></script>
</head>
<body>
<main style=”border:1px solid #0000ff”>
<h1 style=”font-size:24px”>Digital clock</h1>
<fieldset>
<legend>Clock</legend>
<span id=”hrs”> </span>:
<span id=”min”> </span>:
<span id=”sec”> </span>
<span id=”ampm”> </span>
</fieldset>
</main>
</body>
</html>
Once done create timer.js file and include that in your .html page as described above. Please use below code to display the time.
In below code window.onload event handler executes the currentTime JavaScript function. Inside the currentTime JavaScript function, first the current date is determined using the JavaScript Date object. Then Hours, Minutes and Seconds are calculated using the getHours, getMinutes and getSeconds function of the JavaScript Date object.
While calculating the Hours, Minutes and Seconds, if the value of Hour, Minute or Second is less than 10 then a Zero is padded in order to make the value in two digits using singleDigit function.
To convert 24 hours to 12 hours we are using clockHr function var hours = clockHr(date.getHours()) if you want to display only 24 hour time then remove clockHr and use only var hours = singleDigit(date.getHours()) to display clock. As described above singleDigit function will add 0 if hour is less then 10 and will display it in two digits.
var $ = function(id) { return document.getElementById(id); }; // function to initialise getElementById and use it with $ on script.
var currentTime = function() {
var date = new Date(); // initialise date fucntion to variable date
var hours = clockHr(date.getHours()); // get current hr and conver that to 12hr clock to show 24hr clock just remove clockHr function
var minute = singleDigit(date.getMinutes());// get current minute and check for signle digit value
var seconds = singleDigit(date.getSeconds());// get current second and check for signle digit value
var ampm = date.getHours()>=12 ? ‘PM’:’AM’;
$(“hrs”).innerHTML=hours;
$(“min”).innerHTML=minute;
$(“sec”).innerHTML=seconds;
$(“ampm”).innerHTML=ampm;
};
var singleDigit = function(num) { // function to check for single digit. If yes then it will add 0 before that.
if (num < 10) { return “0” + num; }
else { return num; }
};
var clockHr = function(hrs) { // function to convert clock into 12 hr clock
if (hrs > 12) { return hrs-12; }
else { return singleDigit(hrs); }
};
window.onload = function() {
currentTime(); // will display the clock as soon page load.
setInterval(currentTime,500); // change the time ever half second
};
Leave a Reply