Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Simple Date Time Countdown Timer Using JavaScript.

Friday, Dec 15, 2017

Tags:- JavaScript HTML

Countdown Timer is a great way to display the remaining time to a particular event.It creates a sense of excitement among the users and then they continuously visit for the event.In this tutorial we will create a simple and cool Countdown Timer Using JavaScript.You may also like Value Countdown Using jQuery

See Demo
Date Time Countdown Timer

To Create Date Time Countdown Timer it takes only two steps:-

  1. Make a HTML file and define markup for countdown
  2. Make a JavaScript file and define script for countdown

Step 1.Make a HTML file and define markup for countdown

We make a HTML file and save it with a name countdown.html

<script type="text/javascript" src="countdown.js"></script>

 <input type="text" id="month" placeholder="Month">
 <input type="text" id="day" placeholder="Day">
 <input type="text" id="year" placeholder="Year">
 <input type="text" id="hour" placeholder="Hour">
 <input type="text" id="min" placeholder="Min">
 <input type="button" value="Submit" onclick="settimer();">
 <p id="timer_value"></p>


In this step we made 5 text box for user to enter date and time for countdown and click the submit button to start the countdown.We include countdown.js which we will made in next step.You may also like session timeout warning with countdown using PHP and jQuery.

Step 2.Make a JavaScript file and define script for countdown

We make a JavaScript file and save it with name countdown.js

var timer;
function settimer()

 var timer_month=document.getElementById("month").value;
 var timer_day=document.getElementById("day").value;
 var timer_year=document.getElementById("year").value;
 var timer_hour=document.getElementById("hour").value;
 var timer_min=document.getElementById("min").value;

 var timer_date=timer_month+"/"+timer_day+"/"+timer_year+" "+timer_hour+":"+timer_min;
 var end = new Date(timer_date); // Arrange values in Date Time Format
 var now = new Date(); // Get Current date time
 var second = 1000; // Total Millisecond In One Sec
 var minute = second * 60; // Total Sec In One Min
 var hour = minute * 60; // Total Min In One Hour
 var day = hour * 24; // Total Hour In One Day

 function showtimer() {
  var now = new Date();
  var remain = end - now; // Get The Difference Between Current and entered date time
  if(remain < 0) 
   document.getElementById("timer_value").innerHTML = 'Reached!';
  var days = Math.floor(remain / day); // Get Remaining Days
  var hours = Math.floor((remain % day) / hour); // Get Remaining Hours
  var minutes = Math.floor((remain % hour) / minute); // Get Remaining Min
  var seconds = Math.floor((remain % minute) / second); // Get Remaining Sec
  document.getElementById("timer_value").innerHTML = days + 'Days ';
  document.getElementById("timer_value").innerHTML += hours + 'Hrs ';
  document.getElementById("timer_value").innerHTML += minutes + 'Mins ';
  document.getElementById("timer_value").innerHTML += seconds + 'Secs';
 timer = setInterval(showtimer, 1000); // Display Timer In Every 1 Sec

In this step we create a function to set and display the remaining time in every 1 sec.In this function first we clear all the interval in case any found will be stopped to stop the function collision.Then we get the user entered value and current date time and then we get the difference and if the difference is 0 or less than 0 then it prints Reached! then we use Math.floor() function to get Date Time and display in every 1 sec using setInterval function you can set any time in this function.There is also a Digital Clock Using CSS And JavaScript tutorial have a look.

Thats all, this is how to Create Simple Date Time Countdown Timer Using JavaScript.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me

Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.