JS - Countdown Timer

create a timer to countdown to a specific date

Tuts Library »

The Finished Product

Simply open the javascript file and manually enter a date and time. I chose Christmas. Why not?

Christmas Countdown Timer


How It's Done


<div class="timerArea">
   <h4>Christmas Countdown Timer</h4>
   <div class="timeSection">
      <div id="days2go" class="timebox"></div>
      <div id="hours2go" class="timebox"></div>
      <div id="minutes2go" class="timebox"></div>
      <div id="seconds2go" class="timebox"></div>



.timerArea {
   position: relative;
   height: 110px;
   width: 410px;
   margin: 30px;
   padding: 5px 10px 10px;
   background-color: #a00;
   text-align: center;
   border-radius: 10px;
   border: 2px solid #600;
   box-shadow: inset 1px 1px 5px rgba(0,0,0,0.3), inset 1px 1px 20px rgba(0,0,0,0.5);
.timerArea h4 {
   position: relative;
   font-family: sans-serif;
   color: #ffffff;
   margin-bottom: 20px;
   text-shadow: 0px 1px 0px rgba(0,0,0,1);
.timeSection {
   position: relative;
   bottom: 5px;
   left: 72px;
   width: 245px;
   height: 40px;
.timebox {
   float: left;
   height: 30px;
   width: 50px;
   font-size: 18px;
   line-height: 30px;
   text-align: center;
   border: 2px solid white;
   border-radius: 5px;
   background: #232323;
   box-shadow: inset 2px 2px 20px rgba(255,255,255,0.3);
   padding: 0px;
   margin: 5px;
   color: red;


A function call to cd2td(); inside bodysection


The function cd2td()

	// FUNCTION CountDown 2 TargetDate
	function cd2td() {			
		var now = new Date();	// today's date & time
		var year = now.getFullYear();
		var td = new Date("December 25,"+ year +" 00:01:00");  // target date & time
		var timeDiff = td.getTime() - now.getTime();

What to do once the target date (td) has been reached.

		if (timeDiff <= 0) {
			// run any code needed for countdown completion
			document.write("Christmas is here!!");

Retrieving the seconds, minutes, hours and days

		var seconds = Math.floor(timeDiff / 1000);  // Math.floor rounds a number downward to nearest integer; 1000 milliseconds = 1 second
		var minutes = Math.floor(seconds / 60);
		var hours = Math.floor(minutes / 60);
		var days = Math.floor(hours / 24);		

		hours %= 24;		// % Modulus; hours = hours/24; returns the remainder after dividing the specific values. the remainder is the modulus
		minutes %= 60;
		seconds %= 60;

Use document.getElementById to insert data into the viewport.

		document.getElementById("days2go").textContent = days;
		document.getElementById("hours2go").textContent = hours;
		document.getElementById("minutes2go").textContent = minutes;
		document.getElementById("seconds2go").textContent = seconds;

The timer function. It calls itself every second.

		var time_looper = setTimeout('cd2td()',1000);