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

[Jazara 3]

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>

[marsolim 110]

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...

[Jazara 3]

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?>