Home » Education Center » Easy JavaScript/jQuery Countdown Clock Builder

Education Center

Welcome Products / Extensions Education Center

Back to Education Center Home: Go Back Font size: Smaller Larger Font weight: Lighter Heavier

Easy JavaScript/jQuery Countdown Clock Builder

by Nathan Rohler

You've seen them on many sites. If time is involved, there's usually a countdown clock somewhere.

After all, you only have 2 days, 4 hours, 12 minutes and 2 seconds to grab that unbelievable Groupon deal. And your sister-in-law's website is launching in 3 months and 4 days (somebody was playing with the website builder widgets).

Whether it's the end of a sale, an upcoming event, or just a clock showing the current time, there are numerous uses for adding a time clock or countdown clock to your site. In this article, I'll show you exactly how to add a flip clock or a text clock to your site. Thanks to the builder tool, it will only take seconds.

As the starting point for creating these clocks, we're going to use two different helper libraries (FlipClock.js and jQuery.countdown). We could write it all by hand, but other kind folks have already done most of the heavy lifting for us!

Step 1 – Choose Your Options:

Simply choose the options for what kind of clock you want to create. The live preview is displayed below:

1. What time do you want to display?
Current time (clock) Countdown to custom time:

2. Display style:
Big flip clock Small flip clock Text only

3. Display format:
Day counter Hour counter Twelve hour clock Twenty-four hour clock

4. (Optional) Customize Colors and Language Show

$(function(){
	FlipClock.Lang.Custom = { {{customLang}} };
	var opts = {
		clockFace: '{{formatToUse}}',
		countdown: true,
		language: 'Custom'
	};IFSMALLFLIP
	opts.classes = {
		active: 'flip-clock-active',
		before: 'flip-clock-before',
		divider: 'flip-clock-divider',
		dot: 'flip-clock-dot',
		label: 'flip-clock-label',
		flip: 'flip',
		play: 'play',
		wrapper: 'flip-clock-small-wrapper'
	};ENDIF IFCLOCK
	$('.clock-builder-output').FlipClock(opts);ENDIF IFCOUNTDOWN
	var countdown = {{custom_time}} - ((new Date().getTime())/1000); // from: {{custom_time_full}}
	countdown = Math.max(1, countdown);
	$('.clock-builder-output').FlipClock(countdown, opts);ENDIF
});

$(function(){
    var formatToUse = '{{formatToUse}}';
    var dest = $('.clock-builder-output');
    var pad = function(number, length){
       var str = "" + number
       while (str.length < length) {
          str = '0'+str;
       }
       return str;
    }
    var incr = function()
    {
        if (!dest || dest.length==0)
        {
            clearInterval(int);
            return;
        }
        var d = new Date();
        var text;
        if (formatToUse=='TwelveHourClock')
        {
            var h = d.getHours();
            var ap = h<12 ? 'am' : 'pm';
            if (h==0)
                h = 12;
            else if (h > 12)
                h -= 12;
            text = d.getHours() + ':' + pad(d.getMinutes(), 2) + ':' + pad(d.getSeconds(), 2) + ' ' + ap;
        }
        else
        {
            text = pad(d.getHours(), 2) + ':' + pad(d.getMinutes(), 2) + ':' + pad(d.getSeconds(), 2);
        }
        dest.html(text);
    };
    incr();
    var int;
    int = setInterval(incr, 1000);
});

$(function(){
	var d = new Date();
	d.setTime({{custom_time}}*1000); // from: {{custom_time_full}}
	$('.clock-builder-output').countdown(d, function(event) {
		$(this).html(event.strftime('{{formatToUse}}'));
	});
});

Step 2 – Add The Following Customized Code to Your Page:

First, download this .zip file, unzip it, and place the resulting clock_assets/ folder inside the folder that holds your HTML page. (If you're using WordPress, upload the folder to any convenient location on your site and determine the URL to the folder. In the code below, you'll need to update the references to the clock_assets/ folder to point to the full URL.)

Now, add this code inside the <head> of your page, just before the closing </head> tag:

Note: If you're using WordPress, you can add this code to the head.php template file.

Add this code inside the <body> of your page, wherever you want the clock to appear:

Note: If you're using WordPress, you can add this code to the HTML for a post or page.

Step 3 – Enjoy and Share Your Feedback!

It's as simple as that. No more fumbling around with complex scripts; just copy and paste. If the clock doesn't seem to be working, double-check that the clock_assets/ folder has been uploaded to your site, and check the Chrome developer console (View > Developer > JavaScript Console) for any other errors.

We hope you find this builder useful. Have feedback or suggestions? Please share in the comments below!

« Back to Education Center Home

Want to see a specific article or tutorial? Share your suggestion here. If your suggestion is chosen, you'll win a $15 iTunes or Amazon gift card!

Tell Others and Have Your Say

Customizable Google Maps Made Easy! Try EasyMapBuilder Now »

My Account

Contact Us

Shopping Basket

Email:
Password:
	Reset Password...

Why create an account? Manage support tickets and purchases Access to free extensions Special discounts and offers Access to member-only forums

Use the following form to ask a question or submit a support request. An appropriate staff member will reply as soon as possible (usually within a few hours).

Name:
Email:
Product:
Subject:
Message:	Please enter your question...

Attach File:	To attach files, you must Sign Up or Log In.

You have no items in your basket. Featured products:

XML Flash Slideshow v4 Flash Audio Kit for Dreamweaver

Home | Customer Satisfaction / Refund Policy | Privacy Policy | jQuery Slider | Top of Page

DWUser.com

Empowering Web Creativity