jQuery Countdown / Count up Timer with Callback – flipTimer

The plugin “flipTimer” helps you to create jQuery based countdown or count up timer with callback function. You can count digits / number both up and down with this plugin. You just need to set seconds, minutes, hours or days in plugin options then this plugin start counting. It comes with multiple configuration options to get desired output. It can be used to perform specific action after given time (by executing custom callback function).

Moreover, the counting digits can be fully customize with HTML and CSS according to your needs.

Plugin Overview and Preview

Plugin: flipTimer
Author: Andrew Tait
Category: Date & Time
Published: November 5, 2019
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 8 KB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
119 views

Code Rating

0
0.0 rating
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

How to Create Jquery Countdown Timer With Callback

1. In the initial step, load the latest version of jQuery into your website/app.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. Now its time to load plugin assets. So, include plugin assets (from downloaded directory) in your web project.

<!-- flipTimer CSS -->
<link rel="stylesheet" href="css/flipTimer.css">
<!-- flipTimer JS -->
<script src="js/jquery.flipTimer.js"></script>

3. Create HTML div elements with class name hours, minutes and seconds respectively and wrap them into parent <div class="flipTimer">.:

  <div class="flipTimer">
    <div class="hours"></div>
    <div class="minutes"></div>
    <div class="seconds"></div>
  </div>

4. In last, initialize the plugin in jQuery document ready function.

$(document).ready(function(){
	$('.flipTimer').flipTimer({ direction: 'up' });
});

For more advance usage, please check the Configuration Options tab.

Changelog

11/5/2019

  • integration with travis ci

02/19/2015

  • Changed default date to tell todays time.

Advance Configuration Options for jQuery Countdown Timer

The following are some advanced configuration options to create jQuery countdown timer with callback function.

Option Default Type Description
seconds false Boolean The given seconds from where counting will be start.

Example:

$('.flipTimer').flipTimer({
	seconds : false,
}); 
minutes false Boolean The minutes option to pass minutes in number value.

Example:

$('.flipTimer').flipTimer({
	minutes : false,
}); 
hours false Boolean Pass hours in this option.

Example:

$('.flipTimer').flipTimer({
	hours : false,
}); 
days false Boolean This option used to pass days.

Example:

$('.flipTimer').flipTimer({
	days : false,
}); 
date (new Date()).toDateString() Function It define the date string. You can pass function or string value in this option.

Example:

$('.flipTimer').flipTimer({
	date : (new Date()).toDateString(),
}); 
direction up String Decide weather to count up or count down. Possible values are: “up” and “down”.

Example:

$('.flipTimer').flipTimer({
	direction : up,
}); 
callback null Function Custom callback function to execute after finish.

Example:

$('.flipTimer').flipTimer({
	callback : null,
}); 
digitTemplate ” +
‘<div class=”digit”>’ +
‘ <div class=”digit-top”>’ +
‘ <span class=”digit-wrap”></span>’ +
‘ </div>’ + ‘ <div class=”shadow-top”></div>’ +
‘ <div class=”digit-bottom”>’ +
‘ <span class=”digit-wrap”></span>’ +
‘ </div>’ +
‘ <div class=”shadow-bottom”></div>’ +
‘</div>’
String Define the HTML structure for counting digits.

Example:

$('.flipTimer').flipTimer({
	digitTemplate : '' +
       '<div class="digit">' +
       '  <div class="digit-top">' +
       '    <span class="digit-wrap"></span>' +
       '  </div>' +
       '  <div class="shadow-top"></div>' + 
      '  <div class="digit-bottom">' +
       '    <span class="digit-wrap"></span>' +
       '  </div>' +
       '  <div class="shadow-bottom"></div>' +
       '</div>',
}); 

There are no reviews yet. Be the first one to write one.

Submit Your Review