（冰雪林中著此身，不同桃李混芳塵） 用js實現簡單的倒計時結束頁面跳轉效果，主要用到setInterval()和clearInterval()方法，頁面跳轉使用window.location.href = " "。倒計時結束後在當前頁面進行跳轉。 效果圖： 代碼： ...
（冰雪林中著此身，不同桃李混芳塵）
用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>
