Ir para conteúdo

POWERED BY:

Arquivado

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

jacques030498

[Resolvido] Segundos online a página

Por , em Javascript

Recommended Posts

jacques030498    3

jacques030498
Postado

Olá, eu preciso fazer uma página que tenha um link, e que, ao clicar, mostre há quantos segundos o usuário está com a página aberta.

 

Eu consegui fazer uma parte, porém quando eu clico no link mostra "2 segundos" e depois, se eu clicar novamente, continua os 2 segundos (não atualiza nunca, nem mesmo sem clicar).

 

Queria uma ajudinha pra fazer os segundos aumentarem, com o sem o usuário clicar (tanto faz :D).

 

Código da página, caso precise:


<html>
<head>
<title>.</title>
<script type="text/javascript">
       //Contar segundos
function tempoAberta(){
	var tempo = 1;

	tempo++;

	document.getElementById("tempoa").innerHTML = tempo + ' segundos online';
	setTimeout('tempoAberta()', 1000);
}
</script>
</head>

<body>
<a href="javascript:void(0)" onclick="tempoAberta()">Ver tempo online na página</a>
<div id="tempoa"></div>
</body>
</html>

 

Obrigado :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

JCMais    75

JCMais
Postado

Vamos lá.

 

Primeiramente, você deseja:

fazer os segundos aumentarem, com o sem o usuário clicar (tanto faz :D).

Porém você faz com que a função que inicia o contador seja chamada apenas quando o usuário clicar no link. :mellow:

 

Retire o código que inicializa o contador da função que é executada ao clicar no link.

 

O seu outro problema:

se eu clicar novamente, continua os 2 segundos (não atualiza nunca, nem mesmo sem clicar).

Se deve ao fato que você define a variavel tempo dentro do corpo da função que é executada à cada 1s pelo setTimeout:

var tempo = 1;

No momento que ela é executada novamente, tempo é redefinido para 1.

 

Para resolver isto basta retirar a variavel tempo de dentro da função que atualiza a contagem.

 

Relacionado ao teu setTimeout, em Javascript funções são objetos de primeira classe, ou seja, podem ser passadas em parâmetros, não precisa usar:

setTimeout('tempoAberta()', 1000);

Basta usar:

setTimeout(tempoAberta, 1000);

 

Outra sugestão é que evite eventos inline sempre que possivel.

 

Aplicando as correções e sugestões, o teu código ficaria +ou- assim:

var tempo = 0,
   atualizarTempo = function() {
       tempo++;
       setTimeout( atualizarTempo, 1000 );
   };

atualizarTempo();


document.getElementById( 'ver-tempo' ).onclick = function() {
   document.getElementById( 'tempo-total' ).innerHTML = tempo + ' segundos na página.'
   return false;
}

 

<a href="#" id="ver-tempo">Ver tempo online na página</a>
<div id="tempo"></div>

Online: http://jsfiddle.net/JCMais/rC7A7/

 

--

 

Mas no fim, você nem precisa ficar atualizando uma variavel à cada segundo. ^_^

Você só precisa pegar o tempo em que a página foi carregada e salvá-lo. No momento que o usuário clicar no link, você pega o tempo atual e subtrai daquele que você já têm guardado.

 

var pageLoadedDate = new Date;

document.getElementById('ver-tempo').onclick = function() {
   var actualDate = new Date,
       seconds = ( actualDate.getTime() - pageLoadedDate.getTime() ) / 1000 | 0; // Divide por 1000 para transformar em segundos e o "| 0" serve para "arredondar" o resultado.
   document.getElementById('tempo-total').innerHTML = seconds + ' segundos na página.'
   return false;
}

Online: http://jsfiddle.net/JCMais/C4R75/

 

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

jacques030498    3

jacques030498
Postado

Vamos lá.

 

Primeiramente, você deseja:

 

Porém você faz com que a função que inicia o contador seja chamada apenas quando o usuário clicar no link. :mellow:

 

Retire o código que inicializa o contador da função que é executada ao clicar no link.

 

O seu outro problema:

 

Se deve ao fato que você define a variavel tempo dentro do corpo da função que é executada à cada 1s pelo setTimeout:

var tempo = 1;

No momento que ela é executada novamente, tempo é redefinido para 1.

 

Para resolver isto basta retirar a variavel tempo de dentro da função que atualiza a contagem.

 

Relacionado ao teu setTimeout, em Javascript funções são objetos de primeira classe, ou seja, podem ser passadas em parâmetros, não precisa usar:

setTimeout('tempoAberta()', 1000);

Basta usar:

setTimeout(tempoAberta, 1000);

 

Outra sugestão é que evite eventos inline sempre que possivel.

 

Aplicando as correções e sugestões, o teu código ficaria +ou- assim:

var tempo = 0,
   atualizarTempo = function() {
       tempo++;
       setTimeout( atualizarTempo, 1000 );
   };

atualizarTempo();


document.getElementById( 'ver-tempo' ).onclick = function() {
   document.getElementById( 'tempo-total' ).innerHTML = tempo + ' segundos na página.'
   return false;
}

 

<a href="#" id="ver-tempo">Ver tempo online na página</a>
<div id="tempo"></div>

Online: http://jsfiddle.net/JCMais/rC7A7/

 

--

 

Mas no fim, você nem precisa ficar atualizando uma variavel à cada segundo. ^_^

Você só precisa pegar o tempo em que a página foi carregada e salvá-lo. No momento que o usuário clicar no link, você pega o tempo atual e subtrai daquele que você já têm guardado.

 

var pageLoadedDate = new Date;

document.getElementById('ver-tempo').onclick = function() {
   var actualDate = new Date,
       seconds = ( actualDate.getTime() - pageLoadedDate.getTime() ) / 1000 | 0; // Divide por 1000 para transformar em segundos e o "| 0" serve para "arredondar" o resultado.
   document.getElementById('tempo-total').innerHTML = seconds + ' segundos na página.'
   return false;
}

Online: http://jsfiddle.net/JCMais/C4R75/

 

:thumbsup:

 

Muito obrigado, não sabia que dava pra fazer da segunda forma, e vou usar todas as dicas que você me deu, pois estou aprendendo javascript ainda. :D

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