JavaScript Timer Countdown With Seconds
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of JavaScript timer countdown with seconds, as we know countdown timer is updating countdowns for particular timing, here we are going to displaying seconds only by using date object with method getSeconds() in countdown timer on webpage.
It will updating for each seconds by using setInterval() method. For each seconds we can also update some other countdown.
Step By Step Guide On JavaScript Timer Countdown With Seconds :-
As we seen above with the help of those methods we gets result of countdown timer in 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.
Method getSeconds() are used to collect current second from server time accurately.
<!DOCTYPE html>
<html>
<head>
<title>COUNTDOWN SECONDS</title>
</head>
<body>
<H3>COUNTDOWN SECONDS</H3>
<div id="demo"></div>
<button onclick="fun()">Start</button>
<script>
function fun(){
setInterval(function(){
date=new Date();
let s=date.getSeconds();
document.getElementById('demo').innerHTML=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 SECONDS’ on webpage then we defined div tag with id ‘demo’ for appends result seconds 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 seconds and stored on variable ‘s’ and updated for each seconds. Finally we appended result in timer 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 in seconds 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 seconds 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 we have to use respective methods with date object for retrieve current time and display what you want as per you’re wish.
I hope this tutorial on JavaScript timer countdown with seconds helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
