Simple Javascript Countdown

countdown

 

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.

View DEMO HERE

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.

 

 

Enjoy and Goodluck 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s