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 () {

                 

               });

           });      

       </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

Up Next
    Ebook Download
    View all
    Learn
    View all