🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

uiTimeBomb is a really simple jQuery plugin that provides a flexible way to create countdown timers with custom output formats on the webpage.

countdown timer

Documentation

#uiTimeBomb jQuery & Javascript Utility - A fast and flexible countdown timer.

A simple, small, flexible JavaScript countdown timer helper.

See a demo here

##How to use uiTimeBomb

<head> 	... </head> <body> 	<div> 		<div id="timer"></div> 		<div id="timer2"></div> 		<div id="timer3"></div> 	</div> </body>
<script src="uitimebomb.min.js"></script> <script> "use strict"; var tb1 = new uiTimeBomb({ 	elements:[ 		document.getElementById("timer") 	] 	,date:new Date( Date.now()+(12E4) ) 	,localTime:false 	,onStart:function(){ 		console.log("Start"); 	} 	,onComplete:function(){ 		console.log("Complete"); 	} 	,onUpdate:function(ui){ 		var data = ui.get("minutes"); 		var str = ui.supplant("{i}m, {s}s",data); 		var el = document.getElementById("timer"); 		el.innerHTML = str; 	} });  var tb1 = new uiTimeBomb({ 	elements:document.getElementById("timer2") 	,date:new Date( Date.now()+(36E5*2) ) 	,localTime:false 	,method:"hours" 	,format:"{h}h, {i}m, {s}s" });  var tb1 = new uiTimeBomb({ 	elements:document.getElementById("timer3") 	,date:new Date( Date.now()+(864E5*2) ) 	,localTime:false 	,method:"days" 	,format:"{d} Days {h} Hours {i} Mins {s} Secs" }); </script>

##Or using jQuery uiTimeBomb

<script src="jquery.uitimebomb.min.js"></script> <script> "use strict"; jQuery(function($){ 	$.uiTimeBomb({ 		date:new Date( Date.now()+(12E4) ) 		,localTime:false 		,onStart:function(){ 			console.log("Start"); 		} 		,onComplete:function(){ 			console.log("Complete"); 		} 		,onUpdate:function(ui){ 			var data = ui.get("minutes"); 			var str = ui.supplant("{i}m, {s}s",data); 			var el = document.getElementById("timer"); 			el.innerHTML = str; 		} 	}); 	 	$("#timer2").uiTimeBomb({ 		date:new Date( Date.now()+(36E5*2) ) 		,localTime:false 		,method:"hours" 		,format:"{h}h, {i}m, {s}s" 	}); 	 	$("#timer3").uiTimeBomb({ 		date:new Date( Date.now()+(864E5*2) ) 		,localTime:false 		,method:"days" 		,format:"{d} Days {h} Hours {i} Mins {s} Secs" 	}); }); </script>

##License Copyright © WCP Digital & Patrick Purcell
Licensed under the MIT license.
Commercial use? Go for it! You can include it in your commercial products.


You May Also Like