Jquery Plugin
Countdown

Create Simple JQuery Flip Countdown Timer - Flipclockjs

If you are running any deals or auction sites then displaying countdown timer with running deals is great idean that’s why In this post I am going to share a jQuery plugin to create fast countdown timer for your deals/auction/coming soon page.

  • 4.5/5.0
  • Last updated 09 September, 2022
  • By Admin

FlipClock is a jQuery plugin for creating a clock/timer/countdown that displays information in a digital format on a split flap display.

Creating Countdown Timer

In below example I am going to create a simple new year coutdown timer with the help of flipclockjs plugin.

Libraries

Include flipclock.css CSS and flipclock.min.js JS library just after latest jQuery Library

  1. <span class="com">&lt;!--CSS--&gt;</span>
  2. <span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"flipclock.css"</span><span class="tag">&gt;</span>
  3. <span class="com">&lt;!--JS--&gt;</span>
  4. <span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"//code.jquery.com/jquery-latest.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span>
  5. <span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"flipclock.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span>

HTML

Create your countdown clock.

  1. <span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"clock"</span><span class="tag">&gt;&lt;/div&gt;</span>

JS

For creating new year countdown get the current date and Set some date in the future. In this case, it’s always Jan 1 and Calculate the difference in seconds between the future and current date and pass diff in FlipClock countdown..

  1. <span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span>
  2. <span class="kwd">var</span><span class="pln"> clock</span><span class="pun">;</span>
  3. <span class="pln">$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span>
  4. <span class="pln">	</span><span class="com">// Grab the current date</span>
  5. <span class="pln">	</span><span class="kwd">var</span><span class="pln"> currentDate </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">();</span>
  6. <span class="pln">	</span><span class="com">// Set some date in the future. In this case, it's always Jan 1</span>
  7. <span class="pln">	</span><span class="kwd">var</span><span class="pln"> futureDate  </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="pln">currentDate</span><span class="pun">.</span><span class="pln">getFullYear</span><span class="pun">()</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">);</span>
  8. <span class="pln">	</span><span class="com">// Calculate the difference in seconds between the future and current date</span>
  9. <span class="pln">	</span><span class="kwd">var</span><span class="pln"> diff </span><span class="pun">=</span><span class="pln"> futureDate</span><span class="pun">.</span><span class="pln">getTime</span><span class="pun">()</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span><span class="lit">1000</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> currentDate</span><span class="pun">.</span><span class="pln">getTime</span><span class="pun">()</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">;</span>
  10. <span class="pln">	</span><span class="com">// Instantiate a coutdown FlipClock</span>
  11. <span class="pln">	clock </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'.clock'</span><span class="pun">).</span><span class="typ">FlipClock</span><span class="pun">(</span><span class="pln">diff</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span>
  12. <span class="pln">		clockFace</span><span class="pun">:</span><span class="pln"> </span><span class="str">'DailyCounter'</span><span class="pun">,</span>
  13. <span class="pln">		countdown</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span>
  14. <span class="pln">	</span><span class="pun">});</span>
  15. <span class="pun">});</span>
  16. <span class="tag">&lt;/script&gt;</span>

I hope it can help you. Download source code here.

Categories

Accordion
Barcode
Calendar