Countdown timer?

How do you make a Countdown timer?

When the user loads the page, clock starts counting down, it reaches time, it redirects browser to a new page.

Found this, it was not too useful.
http://encosia.com/2007/07/25/display-data-updates-in-real-time-with-ajax/

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Something like this?

   <div id="countDiv"></div>

    <script>
    function countDown (count) {
      if (count > 0) {
       var d = document.getElementById("countDiv");
       d.innerHTML = count;
       setTimeout (function() { countDown(count-1); }, 1000);
       }
      else
       document.location = "someotherpage.html";
    }
    countDown(5);
    </script>

Method 2

Probably the easiest thing to do would be to use the Timer class.

Method 3

with pure javascript you could do it like this

window.onload=function(){ // makes sure the dom is ready
  setTimeout('function(){document.location = "http://www.google.com"}', 10000) // redirects you to google after 10 seconds
}

Method 4

<p>
    When this counter reaches 0, you will be redirected to
    <a href="http://path.to.wherever/" rel="nofollow noreferrer noopener" id="redirectme">wherever</a>.
    <span id="counter">10</span>
</p>
<script type="text/javascript">
(function(){

    var
        counter = document.getElementById("counter"),
        count = parseInt(counter.innerHTML),
        url = document.getElementById("redirectme").href,
        timer;

    function countdown() {
        count -= 1;
        counter.innerHTML = count;
        if (count <= 0) {
            clearTimeout(timer);
            window.location.assign(url);
        }
    }

    timer = setInterval(countdown, 1000); // 1000 ms

})();
</script>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x