Ir para conteúdo

Arquivado

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

Rzorr

Cronometro Digital infinito

Por , em Javascript

Recommended Posts

Rzorr    0

Rzorr
Postado

Boa dia,

Estou começando agora em JavaScript e queria fazer um cronometro que nunca pare, vou tentar explicar melhor. Exemplo eu tenho um post e quero mostrar nele o tempo que ele esta no ar, mas isso que fazer em horas. mas quero deixar isso rodando infinitamente. então se o usuário entra hoje vai estar rodando ex: 11:34:00, ai se eles entrar depois de 2 dias vai mostra 37:34:00 mais isso fica rodando, se ele ficar com a pagina aberta ele vai ficar vendo os números rodar.

*O que eu sei até agora? R:Quase nada.

*O que eu tenho? R: Um script que quando entra na pagina dispara.(mas não isso que eu preciso, preciso que fique rodando independeste de ser usuário A, B ou C acessarem a página.

Segue script que eu tenho.

desde já agradeço e peço desculpa se tiver postado no lugar errado.

Obrigado.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cronometro Infinito</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
	}
body{
	background:#CCC;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	}
#topo{
	background:#069;
	height:100px;
	line-height:100px;
	border-bottom:2px solid #006;
	}
h2 a{
	color:#069;
	text-decoration:none;
	}
h2 a:hover{
	color:#006;
	}
input{
	background:#ccc;
	width:600px;
	height:200px;
	line-height:200px;
	font-size:150px;
	border:none;
	}
</style>
<script type="text/javascript" language="JavaScript">
var segundo = 0+"0";
var minuto = 0+"0";
var hora = 0+"0";

function tempo(){	
	if (segundo < 59){
		segundo++
		if(segundo < 10){segundo = "0"+segundo}
	}else 
		if(segundo == 59 && minuto < 59){
			segundo = 0+"0";
			minuto++;
			if(minuto < 10){minuto = "0"+minuto}
		}
	if(minuto == 59 && segundo == 59 && hora < 23){
		segundo = 0+"0";
		minuto = 0+"0";
		hora++;
		if(hora < 10){hora = "0"+hora}
		}else 
			if(minuto == 59 && segundo == 59 && hora == 23){
				segundo = 0+"0";
				minuto = 0+"0";
				hora = 0+"0";
			}
	form.cronometro.value = hora +":"+ minuto +":"+ segundo
}
</script>
</head>
<body name="form" onload="setInterval('tempo()',983);return false;">
	<div id="topo">
    	<h1>Cronômetro Digital Online com Javascript</h1>
    </div>
	<form name="form">
		<input type="text" name="cronometro" value="00:00:00" />
         <br />
    </form>
    <br />
   </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rzorr    0

Rzorr
Postado

Salva a hora do post no banco de dados e quando ele abrir a pagina no post faz o calculo e exibe o tempo que o post esta online

pensei nisso mas queria que o relógio ficasse contando o tempo entende tipo o impostômetro.

https://impostometro.com.br/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rzorr    0

Rzorr
Postado

só implementar, depois que fizer o calculo de quanto tempo ta online ativa a função pra continuar contando com o javascript

Ygor acabei de pensar nisso eu vi um negocio chamado innerhtml se não me engano em javascript que faz isso, mas olha só se ao invés de colocar a data no banco eu setar uma variável tipo assim.

$datacad = 2016-09-01;

$dataAtual = date(h:i:s);

somar a diferença e apresentar em horas minutos e segundo ai entra o JavaScript fazendo a interação dos segundos minutos e horas. se é claro o cara ficar com a pagina aberta por horas.

estou tentando fazer a parte de php mas a parte de javascript não sei por onde começar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

kelvim    11

kelvim
Postado

Boa noite,

para resolver isso é relativamente simples,

primeiro você salva no banco a data e hora de start

EX: 12/09/2016 - 14:20:35

assim que a página for aberta você faz a conta

EX: 14/09/2016 - 15:25:40 (hoje - agora) menos 12/09/2016 - 14:20:35 (Data salva no banco - exemplo acima)

resultado: 2 dias, 1h 05min 5 s

ou se for o caso: 49h 05min 5 s

ok, já tenho o tempo que está rolando, só falta pegar o reloginho no JS e colocar para rodar

(segue um linque com um exemplo de cronometro https://codepen.io/Romlonix/pen/Fwsza)

é claro que os valores do cronometro inicialmente é 49h 05min 5 s

Compartilhar este post

Link para o post
Compartilhar em outros sites

marsolim    110

marsolim
Postado

o melhor jeito é usar jquery. com ele tu consegue pesquisar no banco de dados a data e hora da criação e fazer o cálculo usando o timerInterval().

Compartilhar este post

Link para o post
Compartilhar em outros sites

ygor.anjos    23

ygor.anjos
Postado

Ygor acabei de pensar nisso eu vi um negocio chamado innerhtml se não me engano em javascript que faz isso, mas olha só se ao invés de colocar a data no banco eu setar uma variável tipo assim.

$datacad = 2016-09-01;

$dataAtual = date(h:i:s);

somar a diferença e apresentar em horas minutos e segundo ai entra o JavaScript fazendo a interação dos segundos minutos e horas. se é claro o cara ficar com a pagina aberta por horas.

estou tentando fazer a parte de php mas a parte de javascript não sei por onde começar.

Se você não pretende usar banco de dados essa é uma opção.

o unico problema é que cada pagina vai ter que ter sua variável com a data da publicação.

Compartilhar este post

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

  • Conteúdo Similar

    • ILR master
      Cronômetro regressivo php
      Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Alessandro Bodão
      Como alterar um texto conforme o horário?
      Por Alessandro Bodão
      Fala rapaziada! Tudo legal?
       
      Estou desenvolvendo um site onde coloquei uma espécie de 'relógio' nele, onde as pessoas veem que horas são, os minutos e segundos vão atualizando automático. Até aí tudo certo...
       
      No header do site tem um título principal (h1) que começa dando bom dia. Como as pessoas vão acessar o site em horários diferentes, tive a ideia do texto atualizar automaticamente pra boa tarde ou boa noite, relativo ao intervalo de tempo do relógio, mas não sou tão bom ainda com javascript. 
    • Alessandro Bodão
      Como alterar um texto conforme o horário?
      Por Alessandro Bodão
      Fala rapaziada! Tudo legal?
       
      Estou desenvolvendo um site onde coloquei uma espécie de 'relógio' nele, onde as pessoas veem que horas são, os minutos e segundos vão atualizando automático. Até aí tudo certo...
       
      No header do site tem um título principal (h1) que começa dando bom dia. Como as pessoas vão acessar o site em horários diferentes, tive a ideia do texto atualizar automaticamente pra boa tarde ou boa noite, relativo ao intervalo de tempo do relógio, mas não sou tão bom ainda com javascript. 
       
      Como eu poderia fazer isso?
    • lezão
      Cronometro regressivo
      Por lezão
      Boa noite!
      Encontrei esse codigo na net, mas naun estou sabendo utilizar ele em meu site.
      Já tentei de tudo, mas ele naun imprime o tempo regressivo na tela.
      var tempo = new Number(); // Tempo em segundos tempo = 60; function startCountdown(){ // Se o tempo não for zerado if((tempo - 1) >= 0){ // Pega a parte inteira dos minutos var min = parseInt(tempo/60); // Calcula os segundos restantes var seg = tempo%60; // Formata o número menor que dez, ex: 08, 07, ... if(min < 10){ min = "0"+min; min = min.substr(0, 2); } if(seg <=9){ seg = "0"+seg; } // Cria a variável para formatar no estilo hora/cronômetro horaImprimivel = '00:' + min + ':' + seg; //JQuery pra setar o valor $("#sessao").html(horaImprimivel); // Define que a função será executada novamente em 1000ms = 1 segundo setTimeout('startCountdown()',1000); // diminui o tempo tempo--; // Quando o contador chegar a zero faz esta ação } else { window.open('index.php', '_self'); } } // Chama a função ao carregar a tela startCountdown(); Eu ja tentei dessas formas, e naun funcionou.
      1 <div id="Number"></div> 2 <div id="startCountdown()"></div> 3 <div id="startCountdown"></div> 4 <div id="timer"></div> 5 <div id="horaImprimivel"></div> ALGUÉM PODE ME AJUDAR?????
      // Quando o contador chegar a zero faz esta ação } else { window.open('index.php', '_self'); } Qnd dá o tempo ele chama a pagina corretamente, apenas naun esta imprimindo o contador na tela.
    • Sapinn
      Como criar um contador regressivo que não para mesmo atualizando a pagina
      Por Sapinn
      Fala galera!!! Preciso de um contador regressivo que vá de horas minutos e segundos até zero e mesmo que seja atualizada a pagina o contador não é reiniciado. 
×

Informação importante

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

  Aceito