用js实现简单的倒计时结束页面跳转效果，主要用到setInterval()和clearInterval()方法，页面跳转使用window.location.href = " "。倒计时结束后在当前页面进行跳转。
效果图：
代码：
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>js倒计时跳转</title> </head> <style> body{ height: 100%; width: 100%; } #content{ position:absolute; top:-200px; bottom:0; left:0; right:0; margin:auto; padding: 20px; border:1px solid #bcbcbc; width: 500px; height: 100px; text-indent : 40px; font-size: 18px; line-height: 40px; text-align:center; } #time{ margin-top: 20px; text-align:center; } #timer{ width: 220px; padding: 10px; font-size: 20px; background: #06428B; color: white; border: 0px; border-radius: 3px; } #timer:hover{ cursor: pointer; } </style> <body> <div id="content"> <div>这是一个倒计时跳转的例子</div> <div id="time" > <input id="timer" type="button" value="开始跳转10秒" onclick="btnClick();"/> </div> </div> </body> <script type="text/javascript" > var time = 9; //时间秒，自己调整! function CountDown() { if (time >= 0) { msg = "开始跳转" + time + "秒"; document.all["timer"].value = msg; --time; } else{ clearInterval(timer); window.location.href = "https://www.cnblogs.com/weijuanran/";//在原来的窗体中直接跳转用 } } timer = setInterval("CountDown()", 1000); function btnClick() { window.location.href = "https://www.cnblogs.com/weijuanran/";//在原来的窗体中直接跳转用 //window.open("https://www.cnblogs.com/weijuanran/");//打开新的窗口页 } </script> </html>
（冰雪林中著此身，不同桃李混芳尘）