jQuery – Contador

Facebooktwitterredditpinterestlinkedinmail

Nesse post apresento uma função simples, para gerar um contador e atualizar o resultado em uma <div>, <span> ou qualquer outro elemento que possua um ID. A função é baseada no efeito do jQuery “animate“.

Função jQuery:

Pesquisei várias formas de executar essa tarefa, e baseado nos exemplos que encontrei, escrevi essa função que coleta dados de um formulários e atualiza o contador na tag <spam id=’contador’>.

A função tanto incrementa quanto decrementa o contador, para decremento, basta colocar o valor inicial maior que o valor final.

Incluí também um campo de velocidade para acelerar ou diminuir tempo da contagem.

<script language="javascript">

jQuery(document).ready(function($){

	function contador(cDivID, cStart, cStop, cSpeed){
		cStart = cStart * 1;
		cStop = cStop * 1;
		if(cStart > cStop){
			cStop = cStop - 1;
		}else{
			cStart = cStart - 1;
		}
		$({ Counter: (cStart) }).animate({
		Counter: cStop
		}, {
			duration: cSpeed * 1,
			easing: 'linear',
			step: function() {
			$(cDivID).text(Math.ceil(this.Counter));
			}
		});
	}

	
	$("#btStart").click(function(){
		var cStart = $("#cStart").val();
		var cStop  = $("#cStop").val();
		var cSpeed = $("#cSpeed").val();
		contador( "#contador", cStart, cStop, cSpeed);
	});
	
	$("#btScript").click(function(){
		$(".exCod").hide();
		$("#exScript").show().addClass("animate__zoomIn");
	})
	
	$("#btHtml").click(function(){
		$(".exCod").hide();
		$("#exHtml").show().addClass("animate__zoomIn");
	})
})

</script>

Código HTML:

<h4>
    Exemplo função contador (jQuery): 
    <span id="contador" >Contador</span>
</h4>
<form name="fContador">
    <label for="cStart">Valor início</label>
        <input type="number" id="cStart" value="1">
    <label for="cStop">Valor final</label>
        <input type="number" id="cStop" value="100">
    <label for="cSpeed">Velocidade</label>
        <input type="number" id="cSpeed" value="10000">
    <button id="btStart" type="button">Iniciar</button>
</form>

Deixe uma resposta

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Mais Truques e dicas

...
Impressão mesclada no Corel Draw

Quem trabalha em Gráfica Expressa, já dever ter encarado o desafio de imprimir um convite com os nomes dos convidados fornecidos pelo cliente a partir de uma lista feita em algum editor de texto, ou ter que imprimir etiquetas de endereços de alguma lista também ou até mesmo ter que imprimir ingressos numerados. O que […]

Problemas no envio de arquivo para impressão

Com a evolução dos programas de edição de textos, imagens e gráficos, muita gente que contratava serviços de profissionais para realizar trabalhos gráficos se sentiu a vontade para fazer as próprias artes, como banners, folders, cartazes, convites dentre outros. A qualidade visual desses trabalhos não se discute, o grande problema é a qualidade técnica. 1º […]

...
Calendário no Corel Draw

Se existe uma coisa que todo arte finalista detesta fazer e tem que fazer todo início de ano, é arte de calendário. O que muita gente não sabe, é que existe uma forma bem simples de montar um calendário bem completo através do Corel X4. Ai vai a dica: Abra um novo arquivo no Corel […]