Creating a Groupon-Like Count Down Timer

Creating a Groupon-Like Count Down Timer

Groupon is definitely one of the most rapid growth websites over past two years. As it spreads all over the world, a lot of Groupon clone sites have been built up. Despite how many different interface designs are there, the only element that is persistent across all of the clones’ sites is the timer. As a developer, have you ever wonder how to build a countdown timer similar to Groupon’s one?

In this tutorial, we will show you how to code a countdown timer using jQuery and PHP. Where jQuery will play the major part of the countdown function and we are just using PHP to output the time value. However you are free to use any language to insert the time value.

Creating a Groupon-Like Count Down Timer

[tut demo=”http://www.onextrapixel.com/examples/groupon-timer/” download=”http://www.onextrapixel.com/examples/groupon-timer/groupon-timer.zip”]

Result

At the end of this tutorial, you will have a simple timer as shown below:

Groupon-Like Count Down Timer

Preparation

Create two php files called index.php and timer.js.

  • index.php: this will be the front page to show the timer. And we will directly use PHP in this page to create a countdown start value.
  • timer.js: We will create a Timer object in this JavaScript file, and it will of course contain the timer object. This is the core JavaScript class which does the entire countdown job.

timer.js

Let us start from JavaScript Timer class first. Copy and paste the following JavaScript code into “timer.js” file created previously. And we will look into the details of this class later on.

  • Get hour, minute and second Dom element using jQuery selector. This means when we use class, we will need to assign class ‘hour’ to hour element, ‘min’ to minute element and ‘sec’ to second element.
  • Hold countdown time value using a variable.
  • Countdown interval in millisecond. We want it to countdown per second. So set it to 1000 as 1000 millisecond equals 1 second.
  • Hold ID value return by setInterval(), and we will need to pass it to clearInterval() later.
  • Call setInterval() when countdown value is not zero.
  • Call setInterval() function and store ID value to timerInterval.
  • Callback function countdown() will be defined within Timer class to avoid conflict.
  • Define callback function countdown.
  • Stop calling countdown function by calling clearInterval() when countdown hits 0.
  • Calculate how many hours left.
  • Calculate how many minutes left.
  • Calculate how many seconds left.
  • Prefix 0 to counter if needed.

Note: when using function parseInt() in JavaScript, always pass a second parameter to ensure it is using the correct number system.

index.php

In this page, we will include jQuery from Google’s CDN and include timer.js which is defined above. And we will initiate the Timer object to do the countdown job. Lastly we will add some simple CSS style to it.

Copy and paste following code into index.php.

  • Include jQuery and timer.js.
  • Defined a DIV element to hold the timer. Ensure you define span with corresponding classes as discusssed in timer.js.
  • Initiate a Timer object when page is fully loaded. Take note how we create timeLeft value using PHP, normally there should be some backend logic to calculate the countdown value.
  • We use some very simple CSS style to style the page.

[tut demo=”http://www.onextrapixel.com/examples/groupon-timer/” download=”http://www.onextrapixel.com/examples/groupon-timer/groupon-timer.zip”]

Conclusion

Now you have a working JavaScript countdown timer. Please let me know how you got along with this, if you encountered any problems, or if you need further information in the comments section below.

Xu Ding is a passionate web developer. He is also the founder of Star Tutorial.

Comments

  1. / Reply

    i’m getting alot from your article. thanks for sharing

  2. / Reply

    Thank you, great and easy tutorial, basically just a counter, now need to connect to ASP and set the countdown.

    • David,
    • December 7, 2011
    / Reply

    Hey Xu –

    Nicely broken down tutorial mate – thanks.

    Thanks,
    David

  3. / Reply

    i’m trying to understand before implement, then share to you my own experience. thanks for sharing

  4. / Reply

    Interesting timer. Off to try it now. Thanks, Xu Ding!

    • chris,
    • June 25, 2012
    / Reply

    Hey men,

    my counter doesent start :( what can i do?

    • alrobeler,
    • September 24, 2012
    / Reply

    hi is possible save values with cookies like when i leave a page it stores current time and resumes from it on next page visit

  5. / Reply

    $(document).ready(function(){

    var timer = new Timer(‘#counter’, timeLeft);
    });

    Can you explain the statement echo ‘var timeLeft=12796000;’;
    How this php variable is used in jquery?

  6. / Reply

    Can you explain the statement echo ‘var timeLeft=12796000;’;
    How this php variable is used in jquery?

    • geetanjali,
    • September 12, 2013
    / Reply

    Can please help me to add days part into above code.
    Means we just pass second and we get time down counter for days,hrs,min and sec

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.

d
c