在特定时间后重定向到另一个页面并显示倒计时

Question

I'm trying to redirect this button after specific time. But the countdown couldn't start before redirecting. I wish it to be redirect after 5 or 10 seconds. But remember window.location should be in HTML Element.

 function myFunction(){ var button=document.getElementById('button'); button.addEventListener('click', function(){ var i=0; var tt=setInterval(function (){ i=i+1; var counter=5-i; button.innerHTML='You Will Be Redirect After:'+counter; if(counter===0){ clearInterval(tt); } },1000); });};

 <button id="button"> <a href="#" class="butstyle" id="button1" onclick="myFunction(window.location='https://google.com')" >Click To Redirect</a> </button>

Answer 1

You can put the var i outside the function. So that counter is incremented as well.

Also do not use inline event Handlers (where possible) - Redirect only when the condition is met in your if condition.

Pass the redirect URL as an argument and access that in myFunction(url)

Demo:

 var i = 0; function myFunction(url) { var tt = setInterval(function() { i = i + 1; var counter = 6 - i; button.innerHTML = 'You Will Be Redirect After:' + counter; if (counter === 0) { clearInterval(tt); window.location = url //redirect here } }, 1000); };

 <button id="button"> <a href="#" class="butstyle" id="button1" onclick="myFunction('https://google.com')" >Click To Redirect</a> </button>

Answer 2

I would do something like this. 5 is the amount of seconds you want to redirect after.

document.getElementById('btn').addEventListener("click", () => {
  let i = 1;
  setInterval(() => {
    if(i == 5){
      window.location.href = "https://google.com"
    }
    document.getElementById('btn').innerHTML = `Redirecting in ${5 - i} seconds`
    i++;
  }, 1000);
});

<button id="btn">
  Click to redirect
</button>

Answer 3

I would take the 2020 option using the "data" attributes, see the below example. the naming of the attributes should be descriptive enough. Let me know if there are any questions.

 <button id="button" onclick="myFunction(this)" data-secondstoredirect="5" data-urltoredirect="https://google.com">Click To Redirect</button> <script> function myFunction(e) { e = e || window.event; var $this = e.target || e.srcElement || e; if ($this.nodeType == 3) $this = $this.parentNode; // defeat Safari bug, https://stackoverflow.com/questions/1553661/how-to-get-the-onclick-calling-object var secondstoredirect = $this.getAttribute("data-secondstoredirect"), redirectAfterSeconds = (secondstoredirect * 1000), urlToRedirect = $this.getAttribute("data-urltoredirect"); $this.innerHTML = 'You Will Be Redirect After: ' + redirectAfterSeconds; var tt = setInterval(function () { window.location.href = urlToRedirect; }, redirectAfterSeconds); } </script>