Vários contadores de tempo dentro do mesmo site

Jakson Fischer · 2 de junho de 2017

Olá pessoal,

Estou com um problema...

Consegui um contador de tempo, ele consegue fazer a cronometragem direitinho, quando for em apenas um Quadro...

Eu preciso de inúmeros contadores dentro da mesma página, contadores de tempo, para um site de leilão, ele basicamente vai dizer quanto tempo falta pra terminar o leilão...

O código que eu tenho do contador é este:

##Este código é o que faz o refresh em uma div específica com o id auto.

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready( function(){
		$('#auto').load('load.php')
		refresh();
	});
	
	function refresh()
	{
		setTimeout( function() {
			$('#auto').load('load.php');
			refresh();
		}, 200);
	}
</script>

O código PHP que tem o contador é este:

<?php
    #Informamos as datas e horários de início e fim no formato Y-m-d H:i:s e os convertemos para o formato timestamp
    date_default_timezone_set('America/Sao_Paulo');
    
		$fhora = date('H')-4;
	$fminuto = date('i');
	$fsegundo = date('s');
	
	$formatado = $fhora . ":" . $fminuto . ":" . $fsegundo;
	
	$data = strtotime(date('Y-m-d ' . $formatado));
	
	
	
		$dia_hora_atual = $data;
    $dia_hora_evento = strtotime(date("2017-06-03 13:13:00"));
   
    #Achamos a diferença entre as datas...
    $diferenca = $dia_hora_evento - $dia_hora_atual;
    
    #Fazemos a contagem...
    $dias = intval($diferenca / 86400);
    $marcador = $diferenca % 86400;
    $hora = intval($marcador / 3600);
    $marcador = $marcador % 3600;
    $minuto = intval($marcador / 60);
    $segundos = $marcador % 60;
    
    #Exibimos o resultado
	$total = $dias + $hora + $minuto + $segundos;
	
	//echo("Total: " . $total . "<br />");
	
    if ($total > 0) {
		echo ("<div class='timer-label'>
                            	<div class='label-timer'>
                                	DIAS
                                </div>
                            	<div class='label-timer'>
                                	HORAS
                                </div>
                            	<div class='label-timer'>
                                	MINUTOS
                                </div>
                            	<div class='label-timer'>
                                	SEGUNDOS
                                </div>
                            </div>
                        	<div class='tempo'>
                            	<span class='texto-tempo'>".$dias."</span>
                            </div>
                            	<span class='pontos'>:</span>
                            <div class='tempo'>
                            	<span class='texto-tempo'>".$hora."</span>
                            </div>
                            	<span class='pontos'>:</span>
                            <div class='tempo'>
                            	<span class='texto-tempo'>".$minuto."</span>
                            </div>
                            	<span class='pontos'>:</span>
                            <div class='tempo'>
                            	<span class='texto-tempo'>".$segundos."</span>
                            </div>");
	} else {
		echo("<div class='timer-label'>
                            	<div class='label-timer'>
                                	DIAS
                                </div>
                            	<div class='label-timer'>
                                	HORAS
                                </div>
                            	<div class='label-timer'>
                                	MINUTOS
                                </div>
                            	<div class='label-timer'>
                                	SEGUNDOS
                                </div>
                            </div>
                        	<div class='tempo'>
                            	<span class='texto-tempo'>00</span>
                            </div>
                            	<span class='pontos'>:</span>
                            <div class='tempo'>
                            	<span class='texto-tempo'>00</span>
                            </div>
                            	<span class='pontos'>:</span>
                            <div class='tempo'>
                            	<span class='texto-tempo'>00</span>
                            </div>
                            	<span class='pontos'>:</span>
                            <div class='tempo'>
                            	<span class='texto-tempo'>00</span>
                            </div>");
	}
	?>

E o meu HTML que recebe este contador é este:


            <div class="col-md-4 col-sm-6 hero-feature">
                <div class="col-md-12 col-sm-1 hero-feature">
                <h4>&nbsp;</h4>
                	<h4 class="fonte" style="font-size: 26px;"><b>Galpão Industrial, 3.735m²           
Barra Funda</b></h4>
                </div>
                <div class="thumbnail">
                <a href="#openModal">
                    <div class="destaque-leilao">
                        <img src="./img/destaque.gif" />
                    </div>
				</a>
                    <img src="img/barra-funda.jpg" alt="" style="width: 352px !important; height:184px !important;">
                    <div class="caption">
                    	<div class="lhe">
                        </div>
                    	<div class="info-img">
                        	<img src="img/info.png" width="50%" />
                        </div>
                    	<div class="lhd">
                        </div>
                        	<div class="separator">
                            </div>
                            <p>&nbsp;</p>
                        <h3>Galpão Industrial</h3>
                        <p>Barra Funda</p>
                    </div>
                    <div class="caption">
                    	<div class="lhe">
                        </div>
                    	<div class="marker-img">
                        	<img src="img/map-marker.png" width="35%" />
                        </div>
                    	<div class="lhd">
                        </div>
                        	<div class="separator">
                            </div>
                        <h3>&nbsp;</h3>
                        <p>São Paulo</p>
                    </div>
                    <div class="caption">
                    	<div class="lhe">
                        </div>
                    	<div class="marker-img">
                        	<img src="img/hammer.png" width="35%" />
                        </div>
                    	<div class="lhd">
                        </div>
                        	<div class="separator">
                            </div>
                        <h3>&nbsp;</h3>
                        <div class="vendas">
                        	<table align="center">
                            	<tr>
                                	<td><img src="./img/olho.png" alt="Visualizações" /></td>
                                	<td>&nbsp;</td>
                                    <td> 1091 </td>
                                	<td>&nbsp;</td>
                                	<td>&nbsp;</td>
                                	<td>&nbsp;</td>
                                	<td>&nbsp;</td>
                                	<td>&nbsp;</td>
                                	<td>&nbsp;</td>
                                	<td>&nbsp;</td>
                                	<td>&nbsp;</td>
                                	<td><img src="./img/court.png" alt="Lances" /></td>
                                	<td>&nbsp;</td>
                                    <td> 82 </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="caption">
                    <div class="caixabg">
                        <p class="avaliado">Avaliado em:</p>
                        <div class="valor-aval">
                            <p class="texto">R$ 12.781.209,12</p>
                        </div>
                        <div class="circulo">
                        	<span class="texto-circulo"><b>50%</b></span>
                        </div>
                        <p class="inicial">Lance Inicial:</p>
                        <div class="valor-lance">
                            <p class="texto-metade">R$ 6.390.604,56</p>
                        </div>
                    </div>
                    </div>
                    <div class="caption">
                    	<span class="termino"><h5><b>Termina em:</b></h5></span>
                        <div class="contador" id="auto">
                        	<!--
                            	CONTADOR DO SITE ESTÁ AQUI
                            -->
                        </div>
                    <div class="caption">
                        <a href="#openModal" class="linkpopup">
                        <div class="bt-ver" onclick="document.getElementById('pop').style.display='block';">
                            <span class="texto-bt">VER MAIS</span>
                        </div>
                        </a>
                    </div>
                </div>
            </div>         

        </div>

Eu tenho que repetir este bloco acima pelo menos umas 50 vezes dentro da mesma página, mas não estou conseguindo achar uma forma de cada um dos blocos tem um contador independente... Não achei solução por aí =/

Quando eu tento inserir mais de um bloco o primeiro para e o segundo dá umas travadas doidas, quando não para também...

Preciso de alguma forma, até um script novo, não sei, para que eu possa colocar mais de 1 contador dentro da mesma página...

Como eu disse, o contador está funcionando perfeitamente, quando colocado em apenas uma DIV... Tentei pegar pela classe, mas não deu certo também, infelizmente...

Preciso de uma solução pra isso urgente e já não sei mais o que fazer haha

Abraços.

DiF · 2 de junho de 2017

@Jakson Fischer Olá,

Uma pergunta... porque você não usa um plugin jQuery já pronto para isso?

jQuery Countdown http://keith-wood.name/countdown.html

http://hilios.github.io/jQuery.countdown/

http://hilios.github.io/jQuery.countdown/examples.html

Quando desenvolvi um site de compra coletiva, usei um destes plugins para criar a contagem de término da promoção.

Com ele você pode ter várias instâncias. Basta chama-lo dentro do while no php

Jakson Fischer · 5 de junho de 2017

Em 2017-6-2 às 12:34, DiF disse:

@Jakson Fischer Olá,

Uma pergunta... porque você não usa um plugin jQuery já pronto para isso?

jQuery Countdown http://keith-wood.name/countdown.html

http://hilios.github.io/jQuery.countdown/

http://hilios.github.io/jQuery.countdown/examples.html

Quando desenvolvi um site de compra coletiva, usei um destes plugins para criar a contagem de término da promoção.

Com ele você pode ter várias instâncias. Basta chama-lo dentro do while no php

Ola @DiF

Então, o problema é que eu preciso que ele não volte ao valor inicial quando a página é recarregada, ele precisa continuar até o limite, por exemplo calcula o tempo restante de hoje até até o dia 07/06/2017 às 11:30, toda vez que a página reinicia, o contador reinicia junto... Tem como me ajudar?

Jakson Fischer · 5 de junho de 2017

@DiF

O problema acima eu resolvi, mas agora estou com outro hahaha

Não consigo achar uma maneira de fazer com que quando o contador zerar apareça ENCERRADO

Tentei fazer cálculos com o PHP, mas ele incia contando do negativo, então não tenho como fazer com que ele faça essa verificação e coloque a mensagem no lugar do contador...

Sabes me dizer alguma forma que consigo isso?

DiF · 5 de junho de 2017

@Jakson Fischer Olá, primeiramente, você pode informar como resolveu o problema anterior.

Já o segundo, como sugeri ali acima, o plugin jQuery countdown, tem um recurso de disparar uma ação quando o tempo tiver terminado. Nisso você pode fazer com ajax e alterar o elemento que contem o tempo regressivo para a palavra encerrado. Você pode fazer isso via javascript e não com php!

Jakson Fischer · 6 de junho de 2017

21 horas atrás, DiF disse:

@Jakson Fischer Olá, primeiramente, você pode informar como resolveu o problema anterior.

Já o segundo, como sugeri ali acima, o plugin jQuery countdown, tem um recurso de disparar uma ação quando o tempo tiver terminado. Nisso você pode fazer com ajax e alterar o elemento que contem o tempo regressivo para a palavra encerrado. Você pode fazer isso via javascript e não com php!

@DiF

O primeiro eu resolvi simples, bastou apenas eu ler melhor o código e ver que a data que ele pega não é da mesma do site, é do código que ele dá:

<script type="text/javascript">
  //A data vai dentro do .countdown, daí ele faz o contador certinho, resolvi desta forma
  $('.counter').countdown('2017/06/07 11:30:00').on('update.countdown', function(event) {
  var $this = $(this).html(event.strftime(''
      + '<span class="tempo-texto">%-d</span> Dias%!d '
      + '<span class="pontos">:</span>'
      + '<span class="tempo-texto">%H</span> Horas '
      + '<span class="pontos">:</span>'
      + '<span class="tempo-texto">%M</span> minutos '
      + '<span class="pontos">:</span>'
      + '<span class="tempo-texto">%S</span> segundos'));
});
</script>

O segundo eu estou trabalhando nele pra ver se dá certo... Assim que eu conseguir eu posto a resposta aqui haha

Jakson Fischer · 6 de junho de 2017

7 horas atrás, Jakson Fischer disse:

@DiF

O primeiro eu resolvi simples, bastou apenas eu ler melhor o código e ver que a data que ele pega não é da mesma do site, é do código que ele dá:


<script type="text/javascript">
  //A data vai dentro do .countdown, daí ele faz o contador certinho, resolvi desta forma
  $('.counter').countdown('2017/06/07 11:30:00').on('update.countdown', function(event) {
  var $this = $(this).html(event.strftime(''
      + '<span class="tempo-texto">%-d</span> Dias%!d '
      + '<span class="pontos">:</span>'
      + '<span class="tempo-texto">%H</span> Horas '
      + '<span class="pontos">:</span>'
      + '<span class="tempo-texto">%M</span> minutos '
      + '<span class="pontos">:</span>'
      + '<span class="tempo-texto">%S</span> segundos'));
});
</script>

O segundo eu estou trabalhando nele pra ver se dá certo... Assim que eu conseguir eu posto a resposta aqui haha

@DiF

O segundo problema eu resolvi de uma forma simples também... Utilizei um IF dentro do Javascript, fazendo com isso que quando ele mudasse o status do evento, trocasse para ENCERRADO, simples e sem mudar muita coisa.


<script type="text/javascript">
	//Coloquei após a data e horário de término isso ", {elapse: true}", fazendo assim que ele inicie com o elpase "verdadeiro"
  $('.counter2').countdown('2017/06/07 11:30:00', {elapse: true}).on('update.countdown', function(event) {
  //Criei o IF e dei a regra para que ele mostre a frase ENCERRADO quando o elapse se tornar "False" (Falso)
  if (event.elapsed) {

    var $this = $(this).html(event.strftime(''
      + '<div class="encerrado">'
      + '<span class="tex_enc">ENCERRADO</span>'
      + '</div>'));
    //Caso o estado esteja como verdadeiro ele irá apresentar o contador.
  } else {
    var $this = $(this).html(event.strftime(''
      + '<div class="tempo"> '
      + '<span class="tempo-texto">%-d</span> '
      + '</div>'
      + '<span class="pontos">:</span>'
      + '<div class="tempo"> '
      + '<span class="tempo-texto">%H</span> '
      + '</div>'
      + '<span class="pontos">:</span>'
      + '<div class="tempo"> '
      + '<span class="tempo-texto">%M</span>  '
      + '</div>'
      + '<span class="pontos">:</span>'
      + '<div class="tempo"> '
      + '<span class="tempo-texto">%S</span> '
      + '</div>'));
  }
});
</script>

Comentado e simples, muito obrigado pela dica do plugin @DiF, foi de grande valia para mim e ainda usarei ele muito com toda a certeza haha

Abraço.

jennife rqueres · 22 de outubro de 2020

@Jakson Fischer o senhor consegue me ajuda nisso? sou iniciante nisso td e meu amg pediu isso no site de leilao dele, sq eu n sei sobre esse contador, queria uma ajuda, pois smp q posto algo pra me ajudar aqui, ngm me ajuda.