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 () {
});
});
</script>
Step 4
In this step is the CSS code to make the page more attractive.
body {
font: 1em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #1f2225;
}
h1 {
font-family: Georgia, serif;
margin-bottom: 1em;
}
h1 {
font-size: 2em;
line-height: 3em;
}
/* ---------- LAYOUT ---------- */
.container {
width: 100%;
text-align: center;
margin: 0 auto;
}
#logo img {
margin: 2em 0;
}
.timer-area {
background: transparent url('../images/timer-area-pattern.png') left top;
text-align: center;
padding-top: 2em;
margin-bottom: 4em;
}
.timer-area h1 {
color: white;
}
/* ---------- TIMER ---------- */
ul#countdown li {
display: inline-block;
background: transparent url('../images/timer-piece.png') no-repeat left top;
width: 100px;
margin-bottom: 4em;
text-align: center;
}
ul#countdown li span {
font-size: 3em;
font-weight: bold;
color: red;
height: 108px;
line-height: 108px;
position: relative;
}
ul#countdown li span::before {
content: '';
width: 100%;
height: 1px;
position: absolute;
top: 31px;
}
ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
margin-top: 1em;
color: #909091;
text-transform: uppercase;
font-size: .875em;
}
Step 5
At last, let's put in the markup to create the animated countdown timer.
<div class="timer-area">
<h1> C# Corner MVP Summit 2013 is Coming
and you won't want to miss it..
</h1>
<ul id="countdown">
<li>
<span class="days">00</span>
<p class="timeRefDays">days</p>
</li>
<li>
<span class="hours">00</span>
<p class="timeRefHours">hours</p>
</li>
<li>
<span class="minutes">00</span>
<p class="timeRefMinutes">minutes</p>
</li>
<li>
<span class="seconds">00</span>
<p class="timeRefSeconds">seconds</p>
</li>
</ul>
</div>
Step 6
Now, your webpage is ready to show the animated countdown timer. Build the page and run it in the browser.
Output
![CountDown-Timer-In-Asp.net.gif]()