JSFiddle - React, Tailwind, and code Playground

by elone sampaio

HTML

<div class="demo-wrapper">

<h1>Contador</h1>

<div class="demo-conversion">Lendo<a href="http://davidwalsh.name/jquery-countdown-plugin" target="_top">Teste uso do plugin de contador</a></div>

<div id="promoNode"></div>	
	<p>Verifica a contagem  <a href="?">clica para repetir a contagem</a>.</p>
	
	<p>
		<span id="countdown"></span>
	</p>
	
</div>

JavaScript

$(document).ready(function() {
			
			/* delay function */
			jQuery.fn.delay = function(time,func){
				return this.each(function(){
					setTimeout(func,time);
				});
			};
			
			
			jQuery.fn.countDown = function(settings,to) {
				settings = jQuery.extend({
					startFontSize: '36px',
					endFontSize: '12px',
					duration: 1000,
					startNumber: 10,
					endNumber: 0,
					callBack: function() { }
				}, settings);
				return this.each(function() {
					
					if(!to && to != settings.endNumber) { to = settings.startNumber; }
					
					//set the countdown to the starting number
					$(this).text(to).css('fontSize',settings.startFontSize);
					
					//loopage
					$(this).animate({
						'fontSize': settings.endFontSize
					},settings.duration,'',function() {
						if(to > settings.endNumber + 1) {
							$(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1);
						}
						else
						{
							settings.callBack(this);
						}
					});
							
				});
			};
			
			$('#countdown').countDown({
				startNumber: 10,
				callBack: function(me) {
					$(me).text('All done! This is where you give the reward!').css('color','#090');
				}
			});
			
		});