Countdown Timer in ASP.NET Using jQuery

Introduction

In this article I will show you the amazing countdown functionality that displays running timers. This countdown timer will show the days, hours, minutes and seconds that updates on every second.

Online websites often use timers running to show the remaining days, hours, minutes and seconds to some event or to launch a new product. It can be very useful. When people see a count-down timer on the website, they have a natural tendency to make a purchase or act on impulse.

You can easily implement the countdown timer functionality in your website using the jQuery plugin.

So, in this article I use a jQuery plugin to create a running countdown timer to a given date and time. In this article I will use some CSS style and jQuery code to implement this.

Step 1

In this step, we need to code the script to invoke the plugin. Use the following code in your header or footer, wherever you prefer.

<link rel="stylesheet" href="css/styles.css" />

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="js/countdown.js"></script>

Step 2

Adding some jQuery code to the .js file with the name countdown.js as shown above.

(function ($) {

$.fn.countdown = function (options, callback) {

//custom 'this' selector

thisEl = $(this);

//array of custom settings

var settings = {

'date': null,

'format': null

};

//append the settings array to options

if (options) {

$.extend(settings, options);

}

//main countdown function

function countdown_proc() {

eventDate = Date.parse(settings['date']) / 1000;

currentDate = Math.floor($.now() / 1000);

if (eventDate <= currentDate) {

callback.call(this);

clearInterval(interval);

}

seconds = eventDate - currentDate;

days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days

seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed

hours = Math.floor(seconds / (60 * 60));

seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed

minutes = Math.floor(seconds / 60);

seconds -= minutes * 60; //update the seconds variable with no. of minutes removed

//conditional Ss

if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }

if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }

if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }

if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }

//logic for the two_digits ON setting

if (settings['format'] == "on") {

days = (String(days).length >= 2) ? days : "0" + days;

hours = (String(hours).length >= 2) ? hours : "0" + hours;

minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;

seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;

}

//update the countdown's html values.

if (!isNaN(eventDate)) {

thisEl.find(".days").text(days);

thisEl.find(".hours").text(hours);

thisEl.find(".minutes").text(minutes);

thisEl.find(".seconds").text(seconds);

} else {

alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");

clearInterval(interval);

}

}

//run the function

countdown_proc();

//loop the function

interval = setInterval(countdown_proc, 1000);

}

})(jQuery);

Step 3

Add the script tag and use the following code in your head tag in the page.

<script>

$(document).ready(function () {

$("#countdown").countdown({

date: "20 March 2013 12:00:00",

format: "on"

},

function () {

});

$("#b").click(function () {