Ir para conteúdo

POWERED BY:

Arquivado

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

Douglas Fabiano

[Resolvido] Cronometro na página

Por , em Javascript

Recommended Posts

Douglas Fabiano    0

Douglas Fabiano
Postado

Olá pessoal, coloquei um campo com a hora atual (conforme postado em outro tópico) e preciso que na verdade além de horário atual ele vire um "cronometro" mostrando o segundos e minutos atualizados instantaneamente.

 

Vejam o código convencional sem o tipo cronometro:

 

<form action="#" method="post" name="form_1">
Horario Atual
<input type="text" name="textfield2" value="<?php echo date( 'H:i:s' ); ?>" />
</label>
</form>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bad - Lucas    1

Bad - Lucas
Postado

JS?

 

Google é o pai de tudo, se você digitar c* no google aparece as respostas, para determinada pesquisa, então pesquisa "cronometro JS" que você acha vários exemplos! :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

vitorm11    3

vitorm11
Postado

Douglas Fabiano....

 

Segue um exemplo de um cronometro JS...

 

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
<!--
var segundo = 0
var minuto = 0
var hora = 0

function tempo(){
if (segundo <= 59){
segundo++
} else if (segundo == 60 && minuto <= 59){
segundo = 0
minuto++
} else if (minuto == 60){
minuto = 0
hora++
}else if (hora == 23){
hora = 0
}
form1.tempo.value = hora +":"+ minuto +":"+ segundo
}
//-->
</script>
<meta name="GENERATOR" content="MAX's HTML Beauty++ ME">
</head>

<body onload="setInterval('tempo();',1000)"><!--o tempo é definido em milissegundos--->
<form name="form1">
<input type="text" name="tempo" value="">
</form>
</body>
</html>

Fiz exatamente o que o Bad - Lucas falou e essa foi o primeiro link que eu cliquei e ja encontrei a resposta... Antes de postar tente dar uma pesquisada para ver se tem como resolver...

 

Se tiver alguma duvida poste aqui que eu respondo logo em seguida...

 

Att. Vitor.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Fabiano    0

Douglas Fabiano
Postado

Não deu certo não, vejam o código completo, o campo fica em branco:

 

=========================================

<!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>
	<title>Cronometro</title>
	<script language="Javascript">
	<!--
		var segundo = 0
		var minuto = 0
		var hora = 0

		function tempo(){
			if (segundo <= 59){
				segundo++
			} else if (segundo == 60 && minuto <= 59){
				segundo = 0
				minuto++
			} else if (minuto == 60){
				minuto = 0
				hora++
			}else if (hora == 23){
				hora = 0
			}

			form1.tempo.value = hora +":"+ minuto +":"+ segundo
		}
	//-->
</script>
<meta name="GENERATOR" content="MAX's HTML Beauty++ ME">
</head>
<body onload="setInterval('tempo();',1000)"><!--o tempo é definido em milissegundos--->
	<form action="gravar" method="post" name="form_1">
		<label>Nome Solicitante:
			<input type="text" name="nome" />
		</label>
		<label>Fone Solicitante:
			<input type="text" name="fone" />
		</label>
		<label> Cronometro:
			<input type="text" name="tempo" value="">
		</label>
		<p>Hora Atual:
			<label>
				<input type="text" name="textfield" value="<?php echo date( 'H:i:s' ); ?>" readonly="readonly"/>
			</label>
			Data:
			<label>
				<input type="text" name="textfield2" value="<?php echo date( 'd/m/Y' ); ?>" readonly="readonly"/>
			</label>
		</p>
		<p>
			<label>
				<input type="submit" name="gravar" value="enviar" />
			</label>
		</p>
	</form>
</body>
</html>

 

====================================================================

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Batista Neto    448

João Batista Neto
Postado

Não deu certo não, vejam o código completo, o campo fica em branco:

 

O campo está ficando em branco porque o Javascript não está encontrando o formulário.

 

Veja um exemplo funcionando:

<!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>
		<title>Cronometro</title>
		<script type="text/javascript">
			Number.prototype.leftPad = function( length ){
				var ret = new Array( length - this.toString().length + 1 );

				return [ ret.join( '0' ) , this.toString() ].join( '' );
			}

			function tempo(){
				var agora	= new Date();
				var hh		= agora.getHours().leftPad( 2 );
				var mm		= agora.getMinutes().leftPad( 2 );
				var ss		= agora.getSeconds().leftPad( 2 );
				var cron	= document.getElementById( 'cronometro' );

				cron.setAttribute( 'value' , [ hh , mm , ss ].join( ':' ) );
			}
	</script>
	<meta name="GENERATOR" content="MAX's HTML Beauty++ ME">
	</head>
	<body onload="setInterval( tempo , 1000 );">
		<form action="gravar" method="post" name="form_1">
			<label> Cronometro:
				<input id="cronometro" type="text" name="tempo" value="">
			</label>
		</form>
	</body>
</html>

É praticamente o seu código, apenas resumido.

 

Estou movendo o tópico para JavaScript já que o problema não é com o PHP.

Compartilhar este post

Link para o post
Compartilhar em outros sites

CamilaLopez    9

CamilaLopez
Postado

como faço para setar um valor que vem do banco neste codigo ??

Envez de date() ..... colocar um valor do BD e apartir dele faz a cronometragem em tempo real.

assim posso acompanhar meus atendimentos se estao dentro do prazo ;)


Olha a hora que estou tentando resolver isto rsrsrsrsr, quero dormir gente :/

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