Javascript countdown timer hours, minutes seconds

Last Updated : Aug 2, 2022

Table of Contents Show

Step By Step Guide On JavaScript Countdown Timer Hours Minutes Seconds :-
Conclusion :-
How do I make a countdown in JavaScript?
How do I put a countdown clock on my website?
How do I make a countdown timer?
How do you add a time counter in HTML?

IN - JavaScript

In this tutorial we will show you the solution of JavaScript countdown timer hours minutes seconds, as we know countdown timer is updating countdowns for particular timing, here we displaying hours, minutes and seconds by using date object with these methods of getHours(), getMinutes and getSeconds() in countdown.

It will updating for each seconds by using setInterval() method.

Step By Step Guide On JavaScript Countdown Timer Hours Minutes Seconds :-

As we seen above with the help of those methods we gets result of countdown timer in hours, minutes and seconds.

The setInterval() method offered on the window and worker interfaces, repeatedly calls a function or executes a code snippet with a fixed time delay between each call.

This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval() method.

Methods of getHours(), getMinutes and getSeconds() are used to collect current time accurately.

<!DOCTYPE html>
<html>
    <head>
        <title>COUNTDOWN TIMER</title>
    </head>
    <body>
        <H3>COUNTDOWN TIMER</H3>
        <div id="demo"></div>
        <button onclick="fun()">Start</button>
        <script>
            function fun(){
                setInterval(function(){
                    date=new Date();
                    let hr=date.getHours();
                    let m=date.getMinutes();
                    let s=date.getSeconds();
                    document.getElementById('demo').innerHTML=hr+":"+m+":"+s;
                },1000);
            }
        </script>
    </body>
</html>

<!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
The<html> tag is used to indicate the beginning of HTML document.
As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
<body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
Here we defined h3 tag for display heading ‘COUNTDOWN TIMER’ on webpage then we defined div tag with id ‘demo’ for appends result timer on webpage and button ‘Start’ defined for start the timer when user clicks on it.
In script file we defined function fun() within that we used setInterval() method with waiting time as ‘1 second’ so within this method what we had done will updated for each 1 seconds.
Here we created date object ‘date’ by using this we collected current hour, minute and seconds and stored on respective variables ‘hr,m,s’.
Finally we appended result in timer format ‘HH:MM:SS’ on div element by id ‘demo’ for displaying timer on webpage.
Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to create countdown timer on webpage using javascript.

When we executing this program on browser we can see headline of this program with start button when user clicks on it current time retrieved from server and displayed on webpage then for each seconds in timer results gets updated we can see clearly.

If you need only hour or minute or seconds then skip the other thing and display what you need as per you’re wish.

I hope this tutorial on JavaScript countdown timer hours minutes seconds helps you and the steps and method mentioned above are easy to follow and implement.

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

	var deadline = 1577836800000; // 00:00:00, January 1, 2020
	var display = document.querySelector('#countdown');

	function formatTime (milliseconds) {
	var seconds = (milliseconds / 1000).toFixed(0);
	var minutes = Math.floor(seconds / 60);
	var hours = '';

	seconds = Math.floor(seconds % 60);

	seconds = (seconds >= 10) ? seconds : '0' + seconds;

	if (minutes > 59) {
	hours = Math.floor(minutes / 60);
	minutes = minutes - (hours * 60);
	minutes = (minutes >= 10) ? minutes : '0' + minutes;
	}

	if (hours != '') {
	return hours + ':' + minutes + ':' + seconds;
	}

	return minutes + ':' + seconds;
	}

	function countDown(time, element) {
	var remainingMilliseconds = time - Date.now();

	if (remainingMilliseconds > 0) {
	element.innerHTML = (
	'<strong>' + formatTime(remainingMilliseconds) + '</strong>'
	);
	} else {
	element.innerHTML = '<strong>Countdown ended</strong>';
	}

	setTimeout(function () {
	countDown(time, element);
	}, 1000);
	}

	countDown(deadline, display);