使用带倒计时和取消选项的Javascript重定向页面[关闭]

Question

我试图重定向页面倒计时5秒，但用户应该能够取消countdwn并留在页面上。这是我的HTML

<form name="redirect">
<center>
<font face="Arial"><b>You will be redirected to the script in<br><br>
<form>
<input type="text" size="3" name="redirect2">
</form>
seconds</b></font>
</center>

这里是javascript

var targetURL="http://javascriptkit.com";

var countdownfrom=10;


var currentsecond=document.redirect.redirect2.value=countdownfrom+1;
function countredirect(){
if (currentsecond!=1){
currentsecond-=1;
document.redirect.redirect2.value=currentsecond;
}
else{
window.location="WWW.google.com";
return;
}
setTimeout("countredirect()",1000)
}

countredirect();

注意：我实际上想在弹出框中使用取消按钮

Answer 1

你的代码绝对荒谬。你为什么每秒倒计时开始另一次倒计时？你可以设置一个x秒计时器并随时清除它，代码的工作流程是完全没必要的：

var countdown = setTimeout(redirect, redirectTime)

设置一旦超过“redirectTime”时间调用“重定向”功能的超时。

您只需要定义重定向功能：

var newLocation = “...”
function redirect(){
    window.location = newLocation
}

现在你可以用这个清除计时器了：

function clearCountdown (){
    clearTimeout(countdown)
}

您可以在用户单击按钮或执行任何操作时绑定。

如果你添加一点jQuery：

$(document).ready(function(){
    var countdown = setTimeout(redirect, redirectTime)
}

和...

$(“#myButton”).click(clearCountdown)

注意：保持代码和工作流程简单。跟随DRY（不要重复自己）和“简单比复杂更好”（最后一个来自Python的哲学食谱:)）

Answer 2

你可以使用clearTimeout（）

HTML：

<form name="redirect">
<center>
<font face="Arial"><b>You will be redirected to the script in<br><br>
<input type="text" size="3" name="redirect2">
<input type="button" id="CancelButton" value="Cancel" onclick="javascript:cancelRedirect();" >
seconds</b></font>
</center>
</form>

JS：

var targetURL="http://javascriptkit.com";

var countdownfrom=10;
var timeoutHandler;
var currentsecond=document.redirect.redirect2.value=countdownfrom+1;

function countRedirect(){
    if (currentsecond!=1){
        currentsecond-=1;
        document.redirect.redirect2.value=currentsecond;
    }
    else{
        window.location="http://www.google.com";
        return;
    }
    timeoutHandler = setTimeout(countRedirect,1000)
}

function cancelRedirect(){
    clearTimeout(timeoutHandler);
}
countRedirect();