Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

CamilaLopez

Como criar uma lista que atualiza em tempo real

Por , em Javascript

Recommended Posts

CamilaLopez    9

CamilaLopez
Postado

Ola galerinha :P

 

To com uma ideia aqui simples, mas como nao tenho conhecimento o bastante em JS ta complicado rsrs

criei uma lista onde cada item tem seus valores e o "horario do cadastro" respectivamente.

 

assim quando eu chamo a tabela com todos os cadastros, eu quero que mostre o "horario de cadastro" em uma coluna e na outra que um valor em "tempo real" como se fosse um cronometro !!


Exemplo pratico da ideia rsrs

ID -- NOME -- HORARIO CADASTRO -- CRONOMETRO (timer de 10 minutos) -- icone colorido

 

1 -- teste1 -- 12:42:30 -- (timer) -- if timer < 10 minutos { icone verde} else { icone vermelho }

2 -- teste2 -- 12:48:25 -- (timer) -- if timer < 10 minutos { icone verde} else { icone vermelho }

3 -- teste3 -- 12:37:10 -- (timer) -- if timer < 10 minutos { icone verde} else { icone vermelho }

4 -- teste4 -- 12:50:50 -- (timer) -- if timer < 10 minutos { icone verde} else { icone vermelho }

acho que vcs vao conseguir entender .....assim vou ter controle do que esta dentro da maquina e a hora de retirar dela.

obs* o (timer) tem que estar em tempo real, como se fosse um cronometro msm que se inicia na hora ininial e o limete é 10 minutos como exemplo ae se ultrapassar mostra um icone vermelho indicando que ultrapassou o tempo padrao !!

to precisando disto urgente pra terminar um sistema .... :unsure:

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Marcos    11

Ronaldo Marcos
Postado

Entendi?

Nesse exemplo:
1 -- teste1 -- 12:42:30 -- (timer) -- if timer < 10 minutos { icone verde} else { icone vermelho }

 

seriam 12:42:30 + 10? isto é quando for 12:52:31 ficaria com um alerta vermelho?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Marcos    11

Ronaldo Marcos
Postado

Veja só vou explicar e você altera conforme sua necessidade:

 

 

<div style="float:left; padding-right:10px;" id="dataatual1">01:37:00</div>
<div style="float:left; padding-right:10px;" id="saida1"></div>
<div style="width:10px; height: 10px; background: green; float:left;" id="status1"></div>
<br>
<br>
<div style="float:left; padding-right:10px;" id="dataatual2">01:37:00</div>
<div style="float:left; padding-right:10px;" id="saida2"></div>
<div style="width:10px; height: 10px; background: green; float:left;" id="status2"></div>

 

Eu criei acima usando div pra colocar a hora inicial (id=dataatual?), outra div pra colocar o timer (id=saida?) e uma última div que forma um retângulo vermelho ou verde (id=status?), percebe que nos nomes das divs tem 1 ou 2 na frente, isto é, uma sequencia que vc criará de acordo com o loop no seu número de registros, eu coloquei duas sequencias separadas por BR só de exemplo.. é para ficar assim:

exemplopng.png
Bem feinho, mas é a ideia... o de baixo parou pq chegou em 10 min o de cima fica contando o valor até atingir 10 tb e ficar vermelho ...

 

mas pra isso funcionar precisa da função JS, que é a seguinte:

 

 

<script type="text/javascript">

function atualizaContador(Y,M,D,hh,mm,ss,seq) {

var msecPerMinute = 1000 * 60;
var msecPerHour = msecPerMinute * 60;
var msecPerDay = msecPerHour * 24;
var msecPerYear = msecPerYear * 12;

var date = new Date(); //dataatual
var fdate = new Date(Y,M-1,D,hh,mm,ss); //data final +10min
dateMsec = fdate.getTime();

var interval = date.getTime() - dateMsec;

var days = Math.floor(interval / msecPerDay );
interval = interval - (days * msecPerDay );

var hours = Math.floor(interval / msecPerHour );
interval = interval - (hours * msecPerHour );

var minutes = Math.floor(interval / msecPerMinute );
interval = interval - (minutes * msecPerMinute );
//alert(days +"/"+hours+"/"+minutes )

var seconds = Math.floor(interval / 1000 );

if (minutes < 10){
var minutes = "0"+minutes;
}

if (seconds < 10){
var seconds = "0"+seconds;
}

if (days == 0 && hours == 0)
{
if (minutes > 9) {
document.getElementById('saida'+seq).innerHTML = "00:00";
document.getElementById('status'+seq).style.background="red";
} else {
document.getElementById('saida'+seq).innerHTML = minutes +":"+ seconds ;
}
}else{
document.getElementById('saida'+seq).innerHTML = "00:00sss";
document.getElementById('status'+seq).style.background="red";
}
setTimeout(function(){atualizaContador(Y,M,D,hh,mm,ss,seq)},1000);//Reinicia a função a cada um segundo

}

</script>

 

Para chamar a função em cada registro você coloca o nome dela e os parâmetros, agora vc vai usar um loop de novo (de acordo com a linguagem que tá usando) para cada item . Como coloquei duas div´s de exemplo lá em cima, então vamos colocar duas chamadas aqui:

 

 

 

<script type="text/javascript">
atualizaContador(2014,1,9,02,05,35,1);
atualizaContador(2014,1,9,02,00,00,2);
</script>

 

Chamei duas vezes e ele passa os parametros na sequencia que está lá na função: (2014,1,9,02,05,35,1) para (Y,M,D,hh,mm,ss,seq), isto é: Y-ano com 4 digitos, M-mês, D para dia no meu exemplo: 2014-1-9.

Depois vem os campos da hora, hh-mm-ss que nos exemplos estão diferentes, e veja que la no final tem o 1 e no outro o 2 ('seq' na função), que você gerou de acordo com o número de registros, veja que lá na função eu tenho por exemplo (document.getElementById('status'+seq)...) porque daí ele usa esse tal seq para dar nome nas divs la em cima (claro que nao precisa ser divs), assim eu mando ele substituir cada linha especificamente com seus dados alterados segundo a segundo...

 

Isso aí, o código inteiro agora caso queira colocar rodar pra ver funcionando (só lembra de trocar as datas e horas ali do exemplo para os ultimos 10 minutos ou menos)

 

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nova pagina 1</title>
</head>

<body>

<div style="float:left; padding-right:10px;" id="dataatual1">01:37:00</div>
<div style="float:left; padding-right:10px;" id="saida1"></div>
<div style="width:10px; height: 10px; background: green; float:left;" id="status1"></div>
<br>
<br>
<div style="float:left; padding-right:10px;" id="dataatual2">01:37:00</div>
<div style="float:left; padding-right:10px;" id="saida2"></div>
<div style="width:10px; height: 10px; background: green; float:left;" id="status2"></div>


<script type="text/javascript">

function atualizaContador(Y,M,D,hh,mm,ss,seq) {

var msecPerMinute = 1000 * 60;
var msecPerHour = msecPerMinute * 60;
var msecPerDay = msecPerHour * 24;
var msecPerYear = msecPerYear * 12;

var date = new Date(); //dataatual
var fdate = new Date(Y,M-1,D,hh,mm,ss); //data final +10min
dateMsec = fdate.getTime();

var interval = date.getTime() - dateMsec;

var days = Math.floor(interval / msecPerDay );
interval = interval - (days * msecPerDay );

var hours = Math.floor(interval / msecPerHour );
interval = interval - (hours * msecPerHour );

var minutes = Math.floor(interval / msecPerMinute );
interval = interval - (minutes * msecPerMinute );
//alert(days +"/"+hours+"/"+minutes )

var seconds = Math.floor(interval / 1000 );

if (minutes < 10){
var minutes = "0"+minutes;
}

if (seconds < 10){
var seconds = "0"+seconds;
}

if (days == 0 && hours == 0)
{
if (minutes > 9) {
document.getElementById('saida'+seq).innerHTML = "00:00";
document.getElementById('status'+seq).style.background="red";
} else {
document.getElementById('saida'+seq).innerHTML = minutes +":"+ seconds ;
}
}else{
document.getElementById('saida'+seq).innerHTML = "00:00";
document.getElementById('status'+seq).style.background="red";
}
setTimeout(function(){atualizaContador(Y,M,D,hh,mm,ss,seq)},1000);//Reinicia a função a cada um segundo

}

</script>

<script type="text/javascript">
atualizaContador(2014,1,9,02,05,35,1);
atualizaContador(2014,1,9,02,00,00,2);
</script>

</body>

</html>

 

Percebe Camila, que se você quiser mais tarde pode acrescentar uma outra variável na função, passar ela junto dos parâmetros com um tempo específico para cada ítem, caso alguns deles não tenham de ser sempre 10 minutos... se você entender como funciona isso aí vai conseguir adaptar... até logo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

CamilaLopez    9

CamilaLopez
Postado

@Ronaldo Marcos ... seu codigo nao funcionou aki pra testar :/



No firebug mostra este erro:

TypeError: document.getElementById(...) is null
document.getElementById('saida'+seq).innerHTML = "00:00";

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Marcos    11

Ronaldo Marcos
Postado

Já tinha passado o horário... vou trocar o código e passar um input pra vc informar o valor na hora peraí... mas pedi pra outros olhar e usar outros browser e disseram funcionar, vou alterar e te aviso...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Marcos    11

Ronaldo Marcos
Postado

Ok, mas pega o original que mandei, nesse ai tirei o 'dinamismo' nos nomes das divs... se quiser o tempo personalizado do timer pra cada um é só acrescentar as variáveis na função... no original não tinha isso...

Acredito que vá usar BD não vai precisar ficar informando a data né, só as horas, coloquei ai pra teste, da pra pegar automático, mas a data é necessário para no dia seguinte eles não ficarem verdes (ativos) de novo quando coincidir as horas e também porque o JS não tem apenas time só datetime...

Compartilhar este post

Link para o post
Compartilhar em outros sites

CamilaLopez    9

CamilaLopez
Postado

a simm .... bom ter explicado isso, nao tive oportunidade te trabalhar com datas ainda em JS, por isso tanta dificuldade .... e pra falar a verdade mesmo lendo seu codigo estou um pouco perdida rsrsrsrs

mas jaja te dou uma respota pra ter certeza que consegui kkkkkkkk


#desastre em #JS

Compartilhar este post

Link para o post
Compartilhar em outros sites

CamilaLopez    9

CamilaLopez
Postado

Olha querido ..... eu consegui extrair os valores que vem do BD, no entanto só nao tive uma brilhante ideia de colocar este contador em cada linhas e cada um funcionar independente

ele funciona mais somente mostra o ultimo valor do loop e mostra na primeira linha da tabela :/

to com sono, pela manha tento novamente rsrs, tiver uma ideia será util ....

veja meu cod como ta !!

 

 

<?php
        while($l = mysql_fetch_array($logar)) {
                $senha        = $l["cod"];
                $tipo_pedido  = $l["tipo_pedido"];
                $data         = $l["data"];
                             
                $timestamp = strtotime($data);
                $data_1 = date('d/m/Y h:i:s', $timestamp); // data de cadastro
                
                $ano = date("Y", $timestamp);
                $mes = date("m", $timestamp);
                $dia = date("d", $timestamp);
                $hora = date("h", $timestamp);
                $min = date("i", $timestamp);
                $sec = date("s", $timestamp);
                
          echo "
          <tr>
            <td>$senha</td>
            <td>$tipo_pedido</td>
            <td>$data_1</td>
            <td><script>atualizaContador($ano,$mes,$dia,$hora,$min,$sec,20);</script><div style='float:left; padding-right:10px;' id='saida'></div></td>
            <td><div style='width:10px; height: 10px; background: green; float:left;' id='status'></div></td>
            <td>
            <a href='form_usuario/edita_usuario.php?id=$senha&tipo=1' rel='modal'><img id='teste' src='styles/images/ver.png' alt='Vizualizar' /></a>
            </td><td>
            <a href='form_usuario/edita_usuario.php?id=$senha&tipo=2' rel='modal'><img src='styles/images/edit.png' alt='Editar' /></a>
            </td><td>
            <a href='#' onClick='javascript:confirma($senha);'><img id='teste' src='styles/images/delete.png' alt='Deletar' /></a>
            </td>            
          </td>
        </tr>\n";}
        ?>
          
    </table>

 

 

tentei outras formas tbm, mas esta foi a melhorzinha rsrsrs

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Marcos    11

Ronaldo Marcos
Postado

Aparece só em um porque você colocou a chamada assim:

 

atualizaContador($ano,$mes,$dia,$hora,$min,$sec,20)

 

no final você colocou 20, acredito que você não tenha alterado a função, então esse 20 tem de ser dinâmico, ele é lá na função o 'seq'.

Gere esse 'seq' do 'nada' coloque ai no seu loop (while) uma variável e vá incrementando ela a cada registro, pode ser ela (variavel) + 1.

 

E aqui:

 

 

<div style='float:left; padding-right:10px;' id='saida+$seq>'> <--Acho que assim que coloca variavel no php né? kkk<div style='width:10px; height: 10px; background: green; float:left;' id='status+$seq'>

 

no nomes das divs você coloca o nome mais a variavel, assim ele vai trocar em cada linha o timer atualizado e a cor da div verde/vermelha.

 

Do jeito que está ele ta vendo todas as divs com o mesmo nome.... espero que entenda, mas em último caso me mande o código inteiro dessa página que mostro onde alterar....

Compartilhar este post

Link para o post
Compartilhar em outros sites

CamilaLopez    9

CamilaLopez
Postado

Tudo certo .... fiz esta alteração nas divs e funcionou lindamente !!! Obg pela ajuda a todos, especialmente para @Ronaldo

veja a seguir ...

<td><script>atualizaContador($ano,$mes,$dia,$hora,$min,$sec,'30',$contador);</script><div style='float:left; padding-right:10px; text-align:center;' id='saida$contador'></div></td>
<td><div style='width:10px; height: 10px; background: red; float:left; text-align:center;' id='status$contador'></div></td>

o valor de TIME vou criar uma regra agora individual, mas é tranquilo \o/ \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito