Rochcass's Blog

I recently needed a simple javascript countdown and thought would be easier to create one rather than using a complicated existing one. In the following demo, I'm getting date now and add only 1 minute to it for the count down. As soon as the countdown reaches zero seconds, the countdown will be hidden and another element would show.

HTML


			<div id="countdown" class="countdown-wrapper" style="display: block;">

            <div class="countdown">

	              <div class="timer-holder">

		                <div class="timer-slot">

			                  <div id="CountDownDays" class="timer-time"> </div>

			                  <div class="timer-title"> Days </div>

		                </div>

		                <div class="timer-slot">

			                  <div id="CountDownHours" class="timer-time"> </div>

			                  <div class="timer-title"> Hours </div>

		                </div>

		                <div class="timer-slot">

			                  <div id="CountDownMinutes" class="timer-time"> </div>

			                  <div class="timer-title"> Minutes </div>

		                </div>

		                <div class="timer-slot">

			                  <div id="CountDownSeconds" class="timer-time"> </div>

			                  <div class="timer-title"> Seconds </div>

		                </div>

	              </div>

	              <div class="clearfix"></div>

	        </div>

        </div>


		
       <div id="showMsg" style="font-size: 54px; display: none;"> Time Up !!</div>

CSS


			.countdown-wrapper { padding:50px 0px; }

			.countdown { margin:0 auto; padding: 10px 20px; border-radius: 4px;  
      -moz-border-radius: 4px; -webkit-border-radius: 4px; }

			.timer-holder { margin: 0 auto; text-align: center; width: 350px; }

			.timer-slot { width: 65px; border: 1px solid #ccc; float: left; text-align: center; 
 
			      background-color: #F7F7F7; color: #323232; margin: 5px; padding: 5px; 
 
			      border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;  }

			.timer-time {font-family: arial; font-size: 58px;  }

			.timer-title {font-family: arial; font-size: 13px; padding: 3px 0px; }

			.clearfix { float:none; clear: both; margin-bottom: 0 !important; }

Javascript


				var dateNow = new Date();

				var countdown_date = new Date(new Date().setMinutes(dateNow.getMinutes() + 1));

				var days, hours, minutes, seconds;



				// update every 1 second

				var timer = setInterval(function () {CountdownTimer()}, 1000);


				function CountdownTimer() {

					  // calculate difference between now and countdown date

					  var current_date = new Date().getTime();

					  var seconds_left = (countdown_date - current_date) / 1000;


					
					  // calculations

					  days = parseInt(seconds_left / 86400);

					  seconds_left = seconds_left % 86400;


					 
					  hours = parseInt(seconds_left / 3600);

					  seconds_left = seconds_left % 3600;


					 
					  minutes = parseInt(seconds_left / 60);

					  seconds = parseInt(seconds_left % 60);


					
					  document.getElementById("CountDownDays").innerHTML = (days);

					  document.getElementById("CountDownHours").innerHTML = (hours);

					  document.getElementById("CountDownMinutes").innerHTML = (minutes);

					  document.getElementById("CountDownSeconds").innerHTML = (seconds);



					  if(seconds_left <= 0)

					  {

						    clearInterval(timer);

						    document.getElementById("showMsg").style.display = "block";

						    document.getElementById("countdown").style.display = "none";

					  }

				}

If you would like to specify a specific date replace the 2nd line of the Javascript with:

var countdown_date = new Date(2014, 13 - 1, 25, 12, 00).getTime();

Where 1st parameter is the year, the 2nd is the month - 1, 3rd is the date and last 2 parameters are hours and minutes.

Goodluck :)

Back to Article

RochCass: Javascript Countdown