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