JavaScript/jQuery Countdown Clock Builder
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!
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:
<link type="text/css" rel="stylesheet" href="clock_assets/flipclock.css" />Add The Following Customized Code to Your Page:
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:
<div class="clock-builder-output"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="clock_assets/flipclock.js"></script>
<style text="text/css">body .flip-clock-wrapper ul li a div div.inn, body .flip-clock-small-wrapper ul li a div div.inn { color: #CCCCCC; background-color: #333333; } body .flip-clock-dot, body .flip-clock-small-wrapper .flip-clock-dot { background: #323434; } body .flip-clock-wrapper .flip-clock-meridium a, body .flip-clock-small-wrapper .flip-clock-meridium a { color: #323434; }</style>
<script type="text/javascript">
$(function(){
FlipClock.Lang.Custom = { days:'Days', hours:'Hours', minutes:'Minutes', seconds:'Seconds' };
var opts = {
clockFace: 'DailyCounter',
countdown: true,
language: 'Custom'
};
var countdown = 1461399060 - ((new Date().getTime())/1000); // from: 04/23/2016 01:41 pm +0530
countdown = Math.max(1, countdown);
$('.clock-builder-output').FlipClock(countdown, opts);
});
</script>
Note: If you're using WordPress, you can add this code to the HTML for a post or page.