jquery-countdown-timer-control v1.0.3

jQuery countdown timer control

jQuery countdown timer plugin with optional control button, based on the https://github.com/caike/jQuery-Simple-Timer

Help support lighthanabi on Patreon

live demo can be find here: https://lighthanabi.github.io/jQuery-countdown-timer-control/

Usage

You can use it with/without control button

default
<div class="timer timer0" data-minutes-left="0.05"></div>
<br>
with control
<div class="timer timer1" data-minutes-left="0.1"></div>
<br>
<div id="controls">
<div class="timerstart">start</div>
<div class="timerpause">pause</div>
<div class="timerreset">reset</div>
</div>
<br>
without control
<div class="timer timer2" data-minutes-left="0.2"></div>

$(function(){
	//default
	var timer0=$('.timer0').startTimer({}).trigger('start');

	//with control
	var timer1=$('.timer1').startTimer({
		onComplete: function(element){console.log('Complete');}
		,onPause: $('.timerpause'),
		onReset: $('.timerreset'),
		onStart: $('.timerstart')
	});
	
	//without control
	var timer2=$('.timer2').startTimer({
		onComplete: function(element){console.log('Complete');}
		//,onPause: $('.timerpause'), //optional, pause control
		//onReset: $('.timerreset'), //optional, reset control
		//onStart: $('.timerstart') //optional, start control
		//loop: true, //optional, enable loop
		//loopInterval: 2 //optional
	});
	timer2.trigger('start'); //optional, use to start without control button
	//timer2.trigger('pause'); //optional, use to pause without control button
	//timer2.trigger('resetime'); //optional, use to reset without control button
})

Install

Manaul

Download the repository and reference the following from your html:

<script src="jquery.js"></script>
<script src="jquery-countdown-timer-control.js"></script>

npm

npm install jquery-countdown-timer-control --save
npm install jquery --save //if you do not have

Include the following into you html file

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/jquery-countdown-timer-control/jquery-countdown-timer-control.js"></script>

Or

let $ = require("jquery");
require("jquery-countdown-timer-control")($); // passing jQuery as argument

$(function(){
  $('.timer').startTimer({}).trigger('start');
});