JSFiddle - React, Tailwind, and code Playground
HTML
<div id="timer"></div>
JavaScript
$(document).ready(function() {
$('#timer').countTo({
interval: 250,
startNumber: 10,
endNumber: 0,
onLoop: function(self, current, loop) {
$(self).text(current)
},
onStart: function(self) {
console.log(self)
},
onFinish: function(self, current, loop) {
$(self).append(' - finished');
console.log("finished..", self, this, $(this), current, loop)
}
});
});
/**
* countdown timer with some configuration
*
* @version 0.1
* @date 2011/09/02
* @author Conrad 'bartrail' Barthelmes
*
* usage:
*
* $('selector').countTo({
* interval: 1000, // miliseconds the interval is repeated (aka speed)
* startNumber: 10, // start from 10 or any other integer
* endNumber: 0, // end at 0 or any other integer
*
* onLoop: function(self, current, loop) { // fired on every loop
* self; // the fetched element
* current; // current number of interval
* loop; // finished loops
*
* // default behaviour:
* $(self).text(current);
* },
*
* onStart: function(self) { // fired on the beginning
* self; // the fetched element
* },
*
* onFinish: function(self, current, loop) { // fired when finished
* self; // the fetched element
* current; // current number of interval
* loop; // finished loops
* }
* });
*
*/
jQuery.fn.countTo = function(options) {
if(this.length == 0) {
return;
}
// save reference to self
var self = this;
// merge optoins
self.options = {};
jQuery.extend(true, self.options, {
interval : 1000,
startNumber: 10,
endNumber : 0,
onLoop : function(self, current, loop) {
$(self).text(current);
},
onStart : function(self) {},
onFinish : function(self,...