Javascript timer

Asked

Viewed 1,884 times

6

Well what I wanted was to make a 60-second timer.

which would work as follows: Count 60 seconds down 60.59.58, 57, etc... and when you hit 0, pause 0 for 3 seconds, and start all over again 60.59, 58 etc...

How can I do that?

Thank you first of all.

3 answers

6

Use a set of setInterval() with setTimeout():

var temporizador = document.getElementById('temporizador');

var ativerIntervalo = function() {
  temporizador.innerHTML = 60;
  var intervalo = setInterval(function() {
    var novoValor = parseInt(temporizador.innerHTML, 10) - 1;
    temporizador.innerHTML = novoValor;

    if (novoValor === 0) {
      clearInterval(intervalo);
      setTimeout(ativerIntervalo, 3000);
    }
  }, 1000);
};
ativerIntervalo();
<p>Temporizador: <span id="temporizador">60</span></p>

setInterval() to bring your counter down from 60 to 0, and setTimeout() to wait 3 seconds before doing it again.

  • The code is not working.

  • @Gonçalo strange, I’m running the code here in the OS and it’s working as it should. The counter starts at 60, decreases to 0.1 per second, and stops at 0 for 3 seconds. Then repeats the process eternally.

  • Can you send me the full code.

  • I already did, I had put the <p>Timer: <span id="timer">60</span></p> underneath.

  • Tell me one thing what is the variable that takes time, in real time?

  • I’m not sure I understand your question. novoValor is the variable that will, every second, have the current value of the counter. When the timer is in 45, novoValor will equal 45.

  • And tell me something, has the timer be general, ie be for everyone, because when I give F5, the timer back to 60 seconds.

  • That is when it is 45 seconds for me, whether for someone else who is on the page at the same time.

  • Um, there is, but it’s going to get a little complicated. I’ll update my answer in a little while to reflect on that idea of yours.

  • Okay, thank you.

  • Nor, that it is necessary to keep the browser turned on 24 hours.

  • @Gonçalo I’m actually going to leave that out of the answer, because it’s not the scope of the question, and it’s not trivial to give an example. What you need in this case is Realtime Communication. Read on here.

  • If I edit the question, you can answer in the answer?

Show 8 more comments

6


You may have a setInterval and go "managing traffic" from flags/counters to do whatever you want.

For example:

var contador = 60;
var espera;
setInterval(function() {
    contador--;

    if (contador > 0) return reporter(contador + ' segundos'); // aqui é o caso ativo
    if (contador == 0) espera = 3;

    reporter('à espera ' + espera + ' segundos'); // aqui é o caso de espera
    if (contador < 0) espera--;
    if (espera == 0) contador = 60;

}, 1000);

jsFiddle: https://jsfiddle.net/9har0tud/

var reporter = function(report) {
    document.body.innerHTML = report;
}
var contador = 60;
var espera;
setInterval(function() {
    contador--;

    if (contador > 0) return reporter(contador + ' segundos');
    if (contador == 0) espera = 3;
    
    reporter('à espera ' + espera + ' segundos');
    if (contador < 0) espera--;
    if (espera == 0) contador = 60;

}, 1000);

  • Missing reporter function in your code.

  • @Joaopaulo did not put because it is not important for the question/answer, but it is in jsFiddle. In the background instead of this function can be what the AP wants, or is code that runs when the conditions are.

  • I understood Sergio, I only commented because sometimes the person who sees your answer is so layy to test your code and not know why it doesn’t work.

  • @Joaopaulo well seen. I joined an example here too, with everything.

0

example using only setTimout and considering that you have an element with id="counter" jsFiddle

function contar(numeroAtual) {
    document.getElementById('contador').textContent = numeroAtual;
    if (numeroAtual === 0) {
    setTimeout(function(){
        contar(60);
    }, 3000);
  } else {
    numeroAtual--;
    setTimeout(function(){
        contar(numeroAtual);
    }, 1000);
  }
}

contar(0);

Browser other questions tagged

You are not signed in. Login or sign up in order to post.