Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
>
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
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:
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.
Online: http://jsfiddle.net/JCMais/C4R75/
:thumbsup: