Jump to content
Jazara

Criar contadores com tempo diferentes sem crescer o código.

Recommended Posts

Olá pessoal, arrumei este código aqui abaixo que tem um contador regressivo, porém queria dinamizar com php, porém não sei como pegar os números diferentes usando o mesmo sistema de conta sem ter que ter um para cada contador

 

exemplo quero ler do banco o valor e digamos que eu tenha 3 valores diferentes

expira em 30 min

expira em 1 hora

expira em 15 minutos

 

não consegui pensar em como fazer para ter um temporizador para cada situação de forma dinâmica lendo o mesmo código e sem usar iframe. Segue o código.

 

#####

<script>
//CONTAGEM REGRESSIVA
function contador(segundos,pagina){
        contador1 = setTimeout('redireciona(\''+pagina+'\')', segundos*1000);
        atualiza(segundos);
    }
    function atualiza(segundos){
        if(segundos>0){
            //$("#tempo").html(segundos);
            transforma_tempo(segundos);
            segundos = segundos-1;
            contador2 = setTimeout('atualiza(\''+segundos+'\')', 1000);
        }
    }
//CONVERT TEMPO
function transforma_tempo(s){
              
    function duas_casas(numero){
        if (numero <= 9){
            numero = "0"+numero;
        }
        return numero;
    }

    hora = duas_casas(Math.round(s/3600));
    minuto = duas_casas(Math.floor((s%3600)/60));
    segundo = duas_casas((s%3600)%60);
              
    //formatado = hora+":"+minuto+":"+segundo;
formatado = minuto+":"+segundo;
    //return formatado;
    $("#tempo").html(formatado);
 }
//START
contador(1800,'');
</script>

<div class="tempo-restante">
<span id="tempo"></span> min.

<div class='CxInfo'>
<i id="abre-info" class="fa fa-info-circle" aria-hidden="true"></i>
<div class="info-time">Tempo restante para liberar a data do agendamento, caso a compra n&atilde;o seja finalizada!</div>
</div>

</div>

Share this post


Link to post
Share on other sites

uma forma pode ser criando uma lista de tempos vindo do banco de dados tipo

$lista = "";

while(...){// fetch_array ou fetch_assoc ou o que tiver usando...
    $lista .= ", " . $row["coluna"];
}

 

e no javascript


 

...
var lista = "<?php echo $lista; ?>";
...

aí é só iterar sobre lista...

  • Gostei 1

Share this post


Link to post
Share on other sites

Resolvido, adicionei mais um receptor que envia o ID do leitor do tempo que é carregado em cada lugar com seu time diferente, assim ficou dinâmico e prático com seu time em cada, pode não ser o mais leve , mas ficou prático:

 

Arquivo com JS
 

<script>
//CONTAGEM REGRESSIVA
function contador(segundos,pagina,ql_cont){
        contador1 = setTimeout('redireciona(\''+pagina+'\')', segundos*1000);
        ql_cont = "tempo"+ql_cont;
        atualiza(segundos,ql_cont);
    }
    function atualiza(segundos,ql_contB){
        if(segundos>0){
            //$("#tempo").html(segundos);
            //$("#"+ql_contB).html(segundos);
            transforma_tempo(segundos,ql_contB);
            segundos = segundos-1;
            contador2 = setTimeout('atualiza(\''+segundos+'\',\''+ql_contB+'\')', 1000);
        }else{window.location.href = "../entrar-cadastrar/cesta#"+ql_contB;}
    }
//CONVERT TEMPO
function transforma_tempo(s,qlcon){
              
    function duas_casas(numero){
        if (numero <= 9){
            numero = "0"+numero;
        }
        return numero;
    }

    hora = duas_casas(Math.round(s/3600));
    minuto = duas_casas(Math.floor((s%3600)/60));
    segundo = duas_casas((s%3600)%60);
              
    //formatado = hora+":"+minuto+":"+segundo;
formatado = minuto+":"+segundo;
    //return formatado;
    $("#"+qlcon).html(formatado);
 }
//START
//contador(1800,'','tempo');
</script>

 

 

Arquivo com PHP que gerencia os tempos e pode ser carregado através de include:

<?php
$tempo_restante = $HpreF;//"1800";
$ql_item_contar = "".$JCid."";
echo "<script> contador(".$tempo_restante.",'','".$ql_item_contar."'); </script>";
//ler contador
echo"<div class='tempo-restante'>";
//echo $PHhora_reserva."-".$expira_em."<br>".$HpreF."<br>";
echo "*Expira: <span id='tempo".$JCid."'></span> min.";
//caixa info
echo"<div class='CxInfo'>";
echo"<i id='abre-info' class='fa fa-info-circle' aria-hidden='true'></i>";
echo"<div class='info-time'>Tempo restante para liberar a data do agendamento, caso a compra n&atilde;o seja finalizada!</div>";
echo"</div>";
//caixa info - fim
echo"</div>";
//ler contador - fim?>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Joachim Augusto
      ola tudo bem ? preciso criar no meu site algo assim:>  http://leocdmoral.com.br/cd/1290/
      quando clica em download, abre outra página, só que eu queria dentro do proprio post do wordpress uma contagem regressiva, e direcionar a pessoa para um link download, obrigado
    • By Alex Branco
      Boa noite galera,
      Sou iniciante e tenho uma dúvida que deve ser simples. Estou desenvolvendo um site em wordpress e utilizando o plugin wbounce para wordpress que é uma exit intent popup que abre quando a pessoa tira o mouse da janela com a intenção de navegar para outro site.
      Consegui fazer com que essa popup feche depois de aberta após um tempo definido por mim. E também mostrar um contador regressivo de tempo para a janela fechar.
      Porém essa contagem inicia quando o site é aberto e preciso que só se inicie quando a div da popup for mostrada.
      Segue o código que estou utilizando:
      jQuery(document).ready(function($){ var $banner       = $('#wbounce-modal'); // objeto banner var $tempo     = 10; // milisegundos var $intervalo; // funcao que fechará o banner function fechar(){     $("#wbounce-modal").hide(); } setTimeout(fechar, $tempo*1000);          function contador(){     $intervalo = window.setInterval(function() {     var tempoContagem     = $("#contador").html();     var atualizaContagem     = eval(tempoContagem) - eval(1);     $("#contador").html(atualizaContagem);       // chegando em zero o contador é parado     if(atualizaContagem == 0){       pararContagem();     }      }, 1000);   }          // funcao para limpar o contador    function pararContagem(){      window.clearInterval($intervalo);   }     // chamada da funcao que fará a contagem   contador(); })  
      Tentei inserir: if($('#wbounce-modal').css('display') == 'block'){}, mas não deu certo!
       
      Podem me ajudar?
    • By Sulivan1999
      Sou novo em programação, e estou com alguns códigos para por uma contagem regressiva cima de um banner. Já consegui fazer a contagem regressiva de 10 segundos, não estou conseguindo por ela acima do banner, para que quem acessar o site veja. Segue abaixo os códigos que estou usando, se alguém poder me ajudar agradeço muito!
       
      <body> <div style='position: fixed; z-index: 60000; font-family:verdana;font-size:10px;background-color: #FFFFFF;'><p>Fecha em:<p></span></div> <div style="font-family:verdana;font-size:10px; z-index: 70000;" onLoad="relogio()"> <span id="spanRelogio"> </span></div> <div class='footer' id='banner_popup' style='position:fixed; left: 1px; bottom: 0px; height: 100%; width: 100%; z-index:50000;'> <iframe border='0' class='overlay2' frameborder='0' height='100%' marginheight='0' marginwidth='0' scrolling='No' src='http://radiojaboticabal.com.br/publicidade-pop-up/index1.html' style='max-width: 100%; width: 100%;'/> </div> </body> <script language='JavaScript'> function fecha_banner() { var banner_obj = document.getElementById(&#39;banner_popup&#39;); banner_obj.style.display = &#39;none&#39;; } setTimeout(&#39;fecha_banner()&#39;, 17000); </script> <script> /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { p{ font-size: 23px; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { p{ font-size: 19px; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { p{ font-size: 15px; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { p{ font-size: 11px; } } </script> <script> var min, seg; min = 0; seg = 10 function relogio(){ if((min > 0) || (seg > 0)){ if(seg == 0){ seg = 59; min = min - 1 } else{ seg = seg - 1; } if(min.toString().length == 1){ min = "0" + min; } if(seg.toString().length == 1){ seg = "0" + seg; } document.getElementById('spanRelogio').innerHTML = min + ":" + seg; setTimeout('relogio()', 1000); } else{ document.getElementById('spanRelogio').innerHTML = "Aguarde..."; } } </script>  
      Quero que fique mais ou menos desse jeito aqui. Obs: Do jeito que esta no canto superior direito do banner do print.

       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.