Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

tmwh

Cronometro

Mensagens Recomendadas

tmwh

Boas a todos. Depois de ter pesquisado exemplos de cronómetro, e encontrar muitos com problemas, encontrei um código que penso funcionar muito bem.

A ideia seria adaptar para o âmbito desportivo. Uma vez que os primeiros atletas só devem chegar passadas 2 horas do inicio, não faz sentido ter o programa a correr 2 horas para nada. Pensei por isso numa forma de alterar o tempo de inicio para 1:50:00 por exemplo. Para não alterar o código, criar um form para introduzir o tempo de inicio sincronizando-o com um cronómetro de pulso. Depois queria captar o tempo decorrido e introduzir em BD conforme determinado numero de atleta à medida que iam chegando.

Já tentei alterar o código mas não consegui o que pretendo pois os meus conhecimentos de javascript são muito escassos.

Este código de captar o tempo e inserir em BD já existe mas em forma de combobox, em que introduzo horas, minutos e segundos, ou seja, tenho de realizar 4 operações para inserir o tempo. Agora queria agilizar o processo utilizando este cronómetro.

// Put this in the head part of the document

<script language="Javascript">

var startTime = 0
var start = 0
var end = 0
var diff = 0
var timerID = 0
function chrono(){
end = new Date()
diff = end - start
diff = new Date(diff)
var msec = diff.getMilliseconds()
var sec = diff.getSeconds()
var min = diff.getMinutes()
var hr = diff.getHours()
if (min < 10){
min = "0" + min
}
if (sec < 10){
sec = "0" + sec
}
if(msec < 10){
msec = "00" +msec
}
else if(msec < 100){
msec = "0" +msec
}
document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec
timerID = setTimeout("chrono()", 10)
}
function chronoStart(){
document.chronoForm.startstop.value = "stop!"
document.chronoForm.startstop.onclick = chronoStop
document.chronoForm.reset.onclick = chronoReset
start = new Date()
chrono()
}
function chronoContinue(){
document.chronoForm.startstop.value = "stop!"
document.chronoForm.startstop.onclick = chronoStop
document.chronoForm.reset.onclick = chronoReset
start = new Date()-diff
start = new Date(start)
chrono()
}
function chronoReset(){
document.getElementById("chronotime").innerHTML = "0:00:00:000"
start = new Date()
}
function chronoStopReset(){
document.getElementById("chronotime").innerHTML = "0:00:00:000"
document.chronoForm.startstop.onclick = chronoStart
}
function chronoStop(){
document.chronoForm.startstop.value = "start!"
document.chronoForm.startstop.onclick = chronoContinue
document.chronoForm.reset.onclick = chronoStopReset
clearTimeout(timerID)
}
</script>

// Put this in the body part of the document

<span id="chronotime">0:00:00:00</span>
<form name="chronoForm">
<input type="button" name="startstop" value="start!" onclick="chronoStart()" />
<input type="button" name="reset" value="reset!" onclick="chronoReset()" />
</form>

Editado por tmwh

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Ernest Duarte

Bom dia tmwh,

Uma citação tmwh { Depois de ter pesquisado exemplos de cronómetro em java, e encontrar muitos com problemas, encontrei um código que penso funcionar muito bem [em Javascript].}

Diga exatamente o que você quer sem dar a sua própria resposta a sua própria interrogação que a resposta vai aparecer aqui.

Em qualquer caso, em Java existem excelentes cronómetros que funcionam muito bem. Quando você sabe o que procurar.

Mas também existem soluções em Javascript. Mas Java e Javascript só tem o nome Java em comum o resto são diferenças.

Depois de mais de 15 anos passados na área das IT, vejo que por vezes não se faz a diferença entre o espaço do problema e os seus requisitos e o espaço da solução.

Quando começamos a fazer perguntas e, ao mesmo tempo, a propor soluções. Não é fácil chegar a melhor solução. Cada um o seu próprio espaço.

Cordialmente

Ernest Duarte

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

Isto é javascript e nem percebo o que estava a fazer no fórum de Java...

Movido.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
tmwh

Peço desculpa por ter criado o tópico em java. Sei que são linguagens diferentes, foi mesmo falta de atenção minha.

Não pretendia fazer perguntas e dar soluções, apenas indiquei o que pensei fazer.

Uma das coisas que pretendo é alterar a hora de inicio do cronómetro. Em vez de iniciar em 0:00:00:00, iniciar por exemplo em 1:50:00:00.

Já alterei os valores das variáveis startTime = 0 e start = 0, mas não deu em nada.

A outra é captar a hora do cronómetro para inserir em BD.

Obrigado

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
tmwh

Boas. Tentei alterar a data mas não deu em nada.

function chronoStart(){
document.chronoForm.startstop.value = "stop!"
document.chronoForm.startstop.onclick = chronoStop
document.chronoForm.reset.onclick = chronoReset
start = new Date(0:50:00:000)
chrono()

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
tmwh

Boas. Se eu percebesse algo de javascript para além de criar umas funções para fazer uns cálculos, não vinha pedir ajuda. Eu não sou programador e onde trabalho nada tem a ver com isso. Tenho 5 dias para resolver esta questão para adaptar ao que já tenho, daí a urgência. Para quem não percebe de determinada linguagem de programação, é muito difícil perceber um código como o que apresentei. Uma função ainda vá, lê-se umas coisas e chega-se lá, mas quando são muitas funções interligadas... O que acho pertinente, é por lapso referir java em vez de javascript, e rapidamente surgirem 3 comentários, e para resolver concretamente o que peço nada.

Se alguém me puder ajudar agradeço.

Cumprimentos.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

@tmwh

Na quinta linha do link que indiquei tem lá o formato que deves usar... penso que pedir para ler 5 linhas não é pedir muito... mais tempo perdeste a escrever essa resposta...

new Date(year, month, day, hours, minutes, seconds, milliseconds)

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
tmwh

@tmwh

Na quinta linha do link que indiquei tem lá o formato que deves usar... penso que pedir para ler 5 linhas não é pedir muito... mais tempo perdeste a escrever essa resposta...

new Date(year, month, day, hours, minutes, seconds, milliseconds)

Boas taviroquai. Eu não disse que não li. Acabei por escrever aquilo tudo mais como um desabafo de todos os comentários que foram surgindo no tópico.

Agora, já experimentei fazer start = new Date("1:50:00"), tenho de indicar sempre com o formato completo?, isto é

start = new Date(year, month, day [, hour, minute, second, millisecond]);

start = new Date(2013,08,25, 1,50,00);

Será que a função set Date não se aplica melhor ao que pretendo?

Cumps.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

Sim... também podes fazer:

start = new Date();
start.setMinutes(start.getMinutes()+50); // mais 50 minutes após o tempo do browser

Editado por taviroquai
  • Voto 1

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
tmwh

Boas. Vou tentar amanha, (hoje é dia de trabalho) e depois dou o feedback.

Esta função vai buscar o tempo de sistema? Se este estiver errado não dá problema?

Já agora, será que dá para fazer algo como:

$tempoinicio=$_POST['tempoinicio']; // recebia o tempo introduzido num formulario

start = new Date(year, month, day)+$tempoinicio;

Editado por yoda

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
tmwh

Boas. Consegui introduzir a hora inicial do evento :) . Entretanto reduzi do código retirando o que não preciso. Decidi desabilitar o botao de submit pois não interessa parar o cronómetro. Removi também o botão reset pois tambem nao se aplica para o que pretendo.

Agora falta receber o tempo do cronometro numa variável, num dado momento para inserir em BD. Como posso fazer isso? Sei que terá a ver com a variável diff mas não estou a ver como, pois estou confuso.

<html>
<head>
<script language="Javascript">
var startTime = 0
var start = 0
var end = 0
var diff = 0
var timerID = 0
function chrono(){
end = new Date()
diff = end - start
diff = new Date(diff)
var msec = diff.getMilliseconds()
var sec = diff.getSeconds()
var min = diff.getMinutes()
var hr = diff.getHours()
if (min < 10){
min = "0" + min
}
if (sec < 10){
sec = "0" + sec
}
if(msec < 10){
msec = "00" +msec
}
else if(msec < 100){
msec = "0" +msec
}
document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec
timerID = setTimeout("chrono()", 10)
}
function chronoStart(){
document.chronoForm.startstop.disabled=true // PARA DESABILITAR O BOTÃO
start = new Date(2013,08,27,01,00,00,000) // TEMOS DE INTRODUZIR A HORA DE INICIO DA PROVA
chrono()
}
function chronoStopReset(){
document.getElementById("chronotime").innerHTML = "0:00:00:000"
document.chronoForm.startstop.onclick = chronoStart
}
</script>
</head>
<body>
<span id="chronotime">0:00:00:00</span>
<form name="chronoForm">
<input type="button" name="startstop" value="start!" onclick="chronoStart()" />
</form>
</body>
</html>

Cumps

Editado por yoda

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

Agora falta receber o tempo do cronometro numa variável, num dado momento para inserir em BD. Como posso fazer isso? Sei que terá a ver com a variável diff mas não estou a ver como, pois estou confuso.

Sem ajax a forma mais simples é criares um formulário e sempre que actualizares o tempo, actualizas também o valor para enviar no formulário.

Logo a seguir a:

document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec;
document.getElementById("sendtime").value = hr + ":" + min + ":" + sec + ":" + msec; // acrescenta esta linha

E colocas um formulário assim:

<form method="post">
<input name="savetime" id="savetime" value="" />
<button type="submit">Salvar tempo</button>
</form>

Nota: fiz isto à pressa pode ter erros...

Editado por yoda

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
tmwh

Boas tavoroquai.

Vendo este código que fizeste, não estou a ver a relação.. :confused: Aqui tens "sendtime"

document.getElementById("sendtime").value = hr + ":" + min + ":" + sec + ":" + msec; // acrescenta esta linha

e no form não faz referencia a essa variável.

Deve ser isto que falta?? value="sendtime"

<form method="post">
<input name="savetime" id="savetime" value="sendtime" />
<button type="submit">Salvar tempo</button>
</form>

Obrigado!

Editado por yoda

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

O document.getElementById() devolve o nó da tag input identificada por 'savetime'

.value atribui um valor a esse nó para quando submeteres o formulario enviar o valor do cronometro.

Experimenta assim

var timeEl = document.getElementById('savetime');
timeEl.value = hr+':'+min+':'+sec;

Editado por taviroquai

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
tmwh

Boas. Percebi e tenho estado a fazer as alterações para que fique tudo a funcionar mas estou com um pequeno problema; O processo funciona assim: ao introduzir o tempo de determinado atleta, o mesmo é inserido em BD e é feito um refresh à pagina para fazer a leitura dos tempos já inseridos. Isto ao acontecer vai colocar o cronómetro a zeros. Pensei nisto:

  1. remover o botão start do cronómetro e faze-lo iniciar automáticamente com a abertura da página; caso a hora inicial fosse zero
    start = new Date(0000,00,00,00,00,00,000)
    

    o cronómetro estava parado. No caso de já ter sido introduzido uma hora inicial

    start = new Date(2013,08,29,09,00,00,000)
    

    o cronómetro estaria a correr.

mg04.jpg

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
tmwh

Consegui iniciar o cronómetro automaticamente através de: <body onload="chronoStart()"></body> agora ao fazer refresh da página, o cronómetro está sempre a correr.

Também já consegui obter o valor do cronómetro a determinado momento através das variáveis

prova_seg = diff.getSeconds()
prova_min = diff.getMinutes()
prova_hr = diff.getHours()

Não consigo é passar esse tempo para o script inserir_tempo.php

<!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>Untitled Document</title>
<script language="Javascript">
var startTime = 0
var start = 0
var end = 0
var diff = 0
var timerID = 0
var prova_hr
var prova_min
var prova_seg
function chrono(){
end = new Date()
diff = end - start
diff = new Date(diff)

prova_seg = diff.getSeconds()
prova_min = diff.getMinutes()
prova_hr = diff.getHours()

var msec = diff.getMilliseconds()
var sec = diff.getSeconds()
var min = diff.getMinutes()
var hr = diff.getHours()
if (min < 10){
min = "0" + min
}
if (sec < 10){
sec = "0" + sec
}
if(msec < 10){
msec = "00" +msec
}
else if(msec < 100){
msec = "0" +msec
}
document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec
timerID = setTimeout("chrono()", 10)
}
function chronoStart(){
//document.chronoForm.startstop.disabled=true // PARA DESABILITAR O BOTÃO
//start = new Date(2013,12,3,0,00,00,000) // TEMOS DE INTRODUZIR A HORA DE INICIO DA PROVA
start = new Date(2013, 9, 1, 0, 0, 0, 0)
chrono()
}
</script>
<form name="chronoForm" id="chronoForm" method="post" >
<table border="0" align="right">
<tr>
 <td valign="top">
	 <table width="100%" border="0">
	 <tr>
		 <td width="200" align="left" class="tituloinsere">Tempo Prova</td>
		 <td width="150" class="chrono"><span id="chronotime">0:00:00:000</span></td>
		 <td align="right" class="cabecalhoinsere">Dorsal</td>
		 <td ><label>
		 <select name="frontal" id="frontal" style="color:#FFFFFF;background-color:#000000">
			 <option>-----</option>
			 <?php
 $sql = "SELECT frontal FROM bttrain.classifica WHERE tempo = 0 ORDER BY frontal ASC";
 $executar = mysql_query($sql) or die(mysql_error());
 while($reg = mysql_fetch_array($executar))
 {	
 ?>
			 <option id="<?php $reg['id'];?>"><?php echo $reg['frontal'];?></option>
			 <?php
 }
 ?>
		 </select>
		 </label></td>
		 <td align="center"><label>
		 <input name="inserir" type="submit" id="inserir" value="Inserir" onclick="document.write(prova_hr, prova_min, prova_seg)"/>
		 </label></td>
		 </tr>
	 </table>		
</tr>
</table>
</form>
</head>
<body onload="chronoStart()">
</body>
</html>

Como posso resolver isto?

Editado por tmwh

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

Tmwh, isso é uma aplicação para gerir tempos em tempo real? Queres 1 conselho? Usa ajax. Essa aplicação deveria ser essencialmente em JS. No servidor bastava um webservice RESTFull.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
tmwh

Taviroquai, agradeço a ajuda que me deste pois fiquei a perceber um pouco do código. Sinceramente não percebo nada de ajax nem do que disseste do servidor, mas isso é um problema meu, por falta de conhecimentos. Só tenho pena que num forúm, apenas um membro me tenha dado algumas ideias para resolver o problema. Abraço e obrigado por tudo.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.