jQuery Countdown Script

Friday, February 12th, 2010 at 8:29 pm | Projects

Update (5/2/2010): This plugin has been updated. Please refer to the plugin’s page for up to date information.

This is an Easy to use animated countdown javascript.

Full example features a complete “under construction” page with 2 skins.

jQuery Countdown

Features

  • Extremely easy to integrate
  • jQuery compatible
  • Unobtrusive javascript
  • Easily skinable

Demo

Go to the project’s page for more details and download.

    The example includes a very basic “under construction” page. If you are looking for a full featured under construction page Themeforest has some great ones.

    I’d love to hear back from you. Leave your comments.

    Be Sociable, Share!

    Tags:

    93 Responses to “jQuery Countdown Script”

    1. Vassilis says:

      @PADAMAN420

      Sure, just delete the HTML code for weeks and days and you are set.

    2. Vassilis says:

      @George

      PHP code will always be executed before Javascript as the first on is server side and the latter is client side.
      You can use AJAX to achieve what you want.

    3. Vassilis says:

      @George

      Use a set date if you want to do that.
      Alternatively, use the server session store to save the target time and set the setup variables accordingly.

    4. George says:

      for eg vassilis?

    5. Gary says:

      Hi,
      When using a date that require more than 99 weeks off it squishes the weeks digits together too much.

      Would it be possible to add another column of months to script?

      Gary

    6. Gary says:

      Would someone be so kind as to show the complete script with weeks omitted and 3 digit days added?

    7. William Worley says:

      Great plugin!

      But I’m wanting to know how this could be modified to include capability for timezones, I have a specific case where I need to only show the countdown if before 4:00PM/16:00 EDT(eastern daylight time) but the countdown will still be showing for everyone west of the EDT timezone at 4:00PM/16:00 which is not desired.

    8. Alex says:

      Can this be used on wordpress blog?

    9. Boone says:

      Love the script, however I’m having some issues with IE where the Days/Hours/Mins don’t always load, load halfway, or only one number loads. Is there some trick to force IE to behave correctly?

      Thanks

    10. Maurice says:

      I really like this plugin! Kinda cool to have the ticking down feature rather than a static number.

      BUT —- (isn’t there always a BUT?)

      I get this error at the top of the page when it loads….

      Warning: extract() [function.extract]: First argument should be an array in /mywebsite/wp-content/plugins/jquery-t-countdown-widget/countdown-timer.php on line 71

      Warning: extract() [function.extract]: First argument should be an array in /mywebsite/wp-content/plugins/jquery-t-countdown-widget/countdown-timer.php on line 201

      Any ideas why this is happening?

    11. Valeria says:

      Hi, just to tell that I had the same problem then Boone and I realized I was using the jquery-1.3.2.js. When I changed it to jquery-1.4.js the plugin became ok even on IE.

    12. Ray says:

      Does this show different countdowns if you are in different timezones?

      I have an event that is starting on 2pm Dec 1 EST, and want to show the countdown across timezones to that 2pm EST event. How would I do so?

    13. Joe says:

      WOW! Nice scripting!
      I have one question; is it possible to remove the day timer and replace the hours with 24+ timer. So if there are 2 days left, the script shows me 48 hours instead of 2 days?

      Hope you can help me out!
      Thanks

    14. Joe says:

      lol, got it working already, nice peace of coding, good to read!
      Replace
      ——————————————————————
      hours = Math.floor(diffSecs/60/60)%24;
      ——————————————————————
      With
      ——————————————————————
      hours = Math.floor(diffSecs/60/60);
      ——————————————————————

    15. Math Deuka says:

      Hi!

      I have updated the script so it allows a starting time to be passed as a parameter. It’s useful when you want to use server time instead of client’s time which can be wrong.
      In your setup, add the following option:

      $(‘#countdown’).countDown({
      ‘serverStartTime’ :
      });

      In the lwtCountdown-1.0.js file, around line 75 replace var nowTime = new Date() with:


      if(options.serverStartTime)
      var nowTime = new Date(options.serverStartTime);
      else
      var nowTime = new Date();

      Math

    16. leera says:

      Hi I sthere a version of the plugin compatible with jQuery 1.3.I really liked it but cannot upgrade to 1.4 as of now and need to use the plugin in jQuery1.3. But in 1.3 it breaks in IE.Can some one please help me

    17. Armry says:

      This countdown clock doesn’t appear to work past 6 days. Anyone else having as issue? I just want the countdown to start at 47 days and count down.

    18. Steven says:

      To have years, days … only edit this code like that and add a
      0

      if ($.data($this[0], ‘omitWeeks’) == true)
      {
      days = Math.floor(diffSecs/60/60/24);
      weeks = Math.floor(diffSecs/60/60/24/7);
      }
      else
      {
      days = Math.floor(diffSecs/60/60/24)%365;
      years = Math.floor(diffSecs/60/60/24/365)
      }

      $this.dashChangeTo(id, ‘seconds_dash’, secs, duration ? duration : 800);
      $this.dashChangeTo(id, ‘minutes_dash’, mins, duration ? duration : 1200);
      $this.dashChangeTo(id, ‘hours_dash’, hours, duration ? duration : 1200);
      $this.dashChangeTo(id, ‘days_dash’, days, duration ? duration : 1200);
      $this.dashChangeTo(id, ‘years_dash’, years, duration ? duration : 1200);

    19. francis says:

      did anyone found that the cpu loaded quite high with this script ? it jump from 0 to 20+

    20. Robert says:

      I wanted to do an offset date where it would count down 30 seconds from a submit event. As maybe a suggestion in the core setCountDown function to shorten the normal countdown call:

      //in $.fn.setCountDown
      else if (options.targetOffset)
      {
      options.targetOffset.day = options.targetOffset.day == undefined ? 0 : options.targetOffset.day;
      options.targetOffset.month = options.targetOffset.month == undefined ? 0 : options.targetOffset.month;
      options.targetOffset.year = options.targetOffset.year == undefined ? 0 : options.targetOffset.year;
      options.targetOffset.hour = options.targetOffset.hour == undefined ? 0 : options.targetOffset.hour;
      options.targetOffset.min = options.targetOffset.min == undefined ? 0 : options.targetOffset.min;
      options.targetOffset.sec = options.targetOffset.sec == undefined ? 0 : options.targetOffset.sec;
      targetTime.setDate(options.targetOffset.day + targetTime.getDate());
      targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
      targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
      targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
      targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
      targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
      }

      //front code to initiate 30 second countdown
      $(“form#id”).submit(function(){
      $(‘#countdown_dashboard’).countDown({
      targetOffset: {‘sec’: 30}
      });
      });

      //instead of current way
      $(“form#id”).submit(function(){
      $(‘#countdown_dashboard’).countDown({
      targetOffset: {
      ‘day’ : 0,
      ‘month’ : 0,
      ‘year’ : 0,
      ‘hour’ : 0,
      ‘min’ : 0,
      ‘sec’: 30
      }
      });
      });

    21. design1 says:

      Hi,

      I was wondering how can i get just Days, Hours And Minutes.
      My event is in 152 days i want to display 152 days instead of 26 weeks.

      How can i do that?

      Regards

    22. defsound says:

      Does this script use the time from the client’s browser? Or Server?

    23. Design1 says:

      Thanks for that. I have tried to add to the code but it is not right.
      I added just after the target Date of my event:

      jQuery(document).ready(function() {
      $(‘#countdown_dashboard’).countDown({
      targetDate: {
      ‘day’: 138,
      ‘month’: 1,
      ‘year’: 2011,
      ‘hour’: 23,
      ‘min’: 58,
      ‘sec’: 0
      }

      targetOffset: {
      ‘day’: 0,
      ‘month’: 0,
      ‘year’: 1,
      ‘hour’: 0,
      ‘min’: 0,
      ‘sec’: 3
      }
      });

      $(‘#email_field’).focus(email_focus).blur(email_blur);
      $(‘#subscribe_form’).bind(‘submit’, function() { return false; });
      });

    24. Vassilis says:

      @defsound

      Current time is retrieved with JS so it’s the client’s time.

    25. Leo says:

      Hi,first of all, congratulations for this very good script!
      I would like to showa link while time is not ended and once it’s ended show a message. I saw and tried to use onComplete righ after the code but it did not work. I may be missing something. This is the code I’m using, could you help me?

      // Set the Countdown
      jQuery(document).ready(function() {
      $(‘#countdown_dashboard’).countDown({
      targetOffset: {
      ‘day’: 0,
      ‘month’: 0,
      ‘year’: 0,
      ‘hour’: 0,
      ‘min’: 0,
      ‘sec’: 5
      },
      // onComplete function
      onComplete: function() { $(‘#complete_info_message’).slideDown() }//don’t know where to set the message and is there a method to show a link here once time is not ended?
      });
      });

    26. Hello,
      just I want to have minutes and also after counting finished form submitted?
      Any solution for this job?

    27. Ray says:

      Hi,

      How do i trigger image instead of the default slideDown onComplete event? Actually, i am building site to create Groupon.com sort of counter. When the count down end, the Buy button image will be disabled.

      Please advice and hope to hear from you as soon.

      Cheers.

    28. JMOjeda says:

      Im working on MVC 2, the script works very well, but not working the onComplete option. this is my code:

      jQuery(document).ready(function () {
      $(‘#countdown_dashboard’).countDown({
      targetOffset: {
      ‘day’: 0,
      ‘month’: 0,
      ‘year’: 0,
      ‘hour’: 0,
      ‘min’: 0,
      ‘sec’: 0
      }
      });
      $(‘#countdown_dashboard’).stopCountDown();
      var minutos = $(“#minutos”).val();
      $(‘#countdown_dashboard’).setCountDown({
      targetOffset: {
      ‘day’: 1,
      ‘month’: 1,
      ‘year’: 0,
      ‘hour’: ,
      ‘min’: ,
      ‘sec’:
      },omitWeeks: true, onComplete: function() { $(‘#complete_info_message’).slideDown() }
      });
      $(‘#countdown_dashboard’).startCountDown();
      });

    29. [...] Click here Demo Site: Click here Title: jQuery Countdown Script Technology: jQuery Code Site: Click here Demo Site: Click here Title: jQuery Countdown Technology: jQuery Code Site: Click here Demo [...]

    30. james says:

      is there any way to just display how many days are left and omit everything else?

    31. Bart says:

      Hy,

      First, my compliments on this countdown timer…GREAT WORK!
      I want to use it to countdown until my new site goes online.
      I only use the HTML version.
      How do i set up the HTML version to autoredirect to my new site when the counter hits “0″?
      I already letting the index to autorefresh every 5 seconds.

    32. Marcel says:

      Hello, how can i get more then 99 weeks? Enddate: 21.12.2012 ;-)

    33. Marcel says:

      Hello,
      who can i put more than 99 weeks? Thanks

    34. Jorge says:

      Hi Bill!

      How are you getting on?

      I was just going to ask if it is possible to use a code that redirect to a URL as soon the countdown timer reaches zero?

      Give me a hand, please.

      Thanks

    35. Jibe says:

      It seems the onComplete event cannot be used in setCountDown function.

      I have multiple countdowns and each of them should start the following.

    36. Mistik says:

      Is it possible to inverse the script, no to create a count down but create a count “up” … ;)

      Thanks a lot!

    37. Maruse says:

      Is there a way to customize the slide down effect? I want to make it shorter.

    38. johnnyB says:

      So I wanted to do the 3 digit days instead of weeks. I downloaded the HTML Under Construction archive from the project site and simply added the date to countdown to and the omitWeeks variable, but when I add the omitWeeks = true it sets all the values to zero. It works once I take out the omitWeeks variable but I don’t see why. Here’s the code that I have in the file downloaded from the project site

      $(‘#countdown_dashboard’).countDown({
      targetDate: {
      ‘day’: 30,
      ‘month’: 11,
      ‘year’: 2011,
      ‘hour’: 7,
      ‘min’: 0,
      ‘sec’: 0
      }
      omitWeeks: true
      });

    39. luger says:

      @Math

      the code is great and it works like a charm. i have a question about the using server time. im not exactly clear on where to include the “‘serverStartTime’ :” option as mentioned in your comment. do i add it somewhere underneath targetDate, where day, month, etc. is? and what kind of value do i add next to it? do i add a number? how do i let it know, i want it to retrieve the server’s time? any help would be appreciated and thanks for the hard work.

    40. KRodgers says:

      @Admin, thank you for this, it looks and works really well.

      @ Defsound, it depends which option you use. If you use targetDate then it is using the users PC clock and calender to count down to a time and date and will be different for each user, if you use targetOffset then you can choose the period of time to count down to. If you want everyone to see the same countdown amount then you should use the latter.

      I wrote the following in php to calculate the difference between a now and a future date and to submit the calculated difference to the targetOffset function. I hope its useful to someone.

      [code]
      <?php
      function time_difference($endtime){
      //converting from a unix time stamp
      //we deduct 1 day, 1 month and 1970 years as this is when unix time is counted from
      $days= (date("j",$endtime)-1);
      $months =(date("n",$endtime)-1);
      $years =(date("Y",$endtime)-1970);
      $hours =date("G",$endtime);
      $mins =date("i",$endtime);
      $secs =date("s",$endtime);
      $difference="'day': ".$days.",'month': ".$months.",'year': ".$years.",'hour': ".$hours.",'min': ".$mins.",'sec': ".$secs;
      return $difference;
      }
      // $future_date should be a unix timestamp
      $future_date = 1420113600; // 1st Jan 2015 12:00:00 (noon)
      $endtime = $future_date - time(); //gives the number of seconds between now and the future date
      $countdown = time_difference($endtime);

      echo "
      jQuery(document).ready(function() {
      $('#countdown_dashboard').countDown({
      targetOffset: {",$countdown,"
      }
      });
      });
      ";
      ?>
      [/code]

    41. Adailton says:

      Hello
      First congratulations for the script, very functional!

      Doubt, how would he show the days to hours? Type: 2 days 48 hours show. – 3 days 72 hours show ..

      Thanks

    42. Math Deuka says:

      @luger

      Here’s my setup:

      [code]

      $(document).ready(function (){
      $('#countdown').countDown({
      targetDate: {
      'day': 1,
      'month': 12,
      'year': 2012,
      'hour': 23,
      'min': 0,
      'sec': 0,
      'utc': true
      },
      'omitWeeks': true,
      'serverStartTime' :
      });
      });

      [/code]

      The part was missing in my published comment. It got lost somewhere when submitting the comment.

      Hope it helps.


      Math

    Leave a Reply