Home javascript Jquery simple countdown timer

Jquery simple countdown timer

Author

Date

Category

How do I make the timer work?

& lt; script & gt;
  $ (document) .ready (function ()
  {
    var _Seconds = $ ('. seconds'). text ();
    if (_Seconds == 0)
    {
      alert ('End!');
    } else {
      setTimeout (function ()
      {
        $ ('. seconds'). text (_Seconds - 1);
      }, 1000);
    }
  });
  & lt; / script & gt;

Answer 1, authority 100%

These timers are easier to do with setInterval () , and you only run setTimeout () once.

And your mistake, in fact, is that your condition will never display alert () , since when describing the condition, _Seconds will not equal 0 , and, again, setTimeout () will only fire once.

var _Seconds = $ ('. seconds'). text (),
 int;
int = setInterval (function () {// start the interval
 if (_Seconds & gt; 0) {
  _Seconds--; // subtract 1
  $ ('. seconds'). text (_Seconds); // print the resulting value into a block
 } else {
  clearInterval (int); // clear the interval so that it does not continue working when _Seconds = 0
  alert ('End!');
 }
}, 1000); 
& lt; script src = "https://ajax.googleapis.com/ajax/libs /jquery/2.1.1/jquery.min.js"></script>
& lt; div class = "seconds" & gt; 10 & lt; / div & gt; 

Answer 2, authority 50%

Via setTimeout :

const time = $ ('. seconds');
timerDecrement ();
function timerDecrement () {
 setTimeout (function () {
  const newTime = time.text () - 1;
  time.text (newTime);
  if (newTime & gt; 0) timerDecrement ();
 }, 1000);
} 
& lt; script src = "https://ajax.googleapis.com/ajax/libs /jquery/2.1.1/jquery.min.js"></script>
& lt; span class = "seconds" & gt; 20 & lt; / span & gt; 

Answer 3, authority 50%

Option with recursive setTimeout :

$ (document) .ready (function () {
 var sec = $ ('. seconds');
 var secVal = parseInt (sec.text ());
 var timer = setTimeout (function tick () {
  if (secVal & gt; 0) {
   sec.text (- secVal);
   timer = setTimeout (tick, 1000);
  }
 }, 1000);
}); 
. seconds {
 padding: 2px 5px;
 background: lightgreen;
} 
& lt; script src = "https://ajax.googleapis.com/ajax/libs /jquery/2.1.1/jquery.min.js"></script>
& lt; div class = "seconds" & gt; 5 & lt; / div & gt; 

Answer 4

My version with a redirect to the desired URL, I use it for notification after registration, with a return to the main page.

var box = $ ('. timer_replace'),
      text = box.html (),
      second = box.data ('second') + 1,
    int;
    int = setInterval (function () {
      second--;
      if (second & gt; 0) {
        box.html (text + '' + second);
      } else {
        window.location.replace ("/");
        clearInterval (int);
      }
    }, 1000); 
& lt; script src = "https://ajax.googleapis.com/ajax/libs /jquery/2.1.1/jquery.min.js"></script>
& lt; div & gt; & lt; a class = "timer_replace" data-second = "5" href = "/" & gt; Home & lt; / a & gt; & lt; / div & gt; 

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions