【牛腩新聞釋出系統】網頁計時跳轉Demo
阿新 • • 發佈：2019-02-07
牛腩新聞釋出系統裡面，出錯頁有一個計時頁面跳轉的功能。就看著做了一個跳轉的小例子。
頁面圖展示：
程式碼展示：
<pre name="code" class="html"><!-- * 建立人：琚建飛 * 建立時間：2016年10月5日13:06:47 --> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>網頁計時</title> <link href="TimerSheet.css" rel="stylesheet" /> <script type="text/javascript"> var i = 20; var intervalid; intervalid = setInterval("fun()", 1000);//計時函式,函式名和時間間隔 function fun() { if (i == 1) //判斷到0的時候，自動跳轉到百度頁面 { window.location.href = "https://www.baidu.com/"; //超連結也可以寫跳轉到另一個頁面 clearInterval(intervalid); } document.getElementById("mes").innerHTML = i; i--; } </script> </head> <body> <div id="errorfrm" class="round1"> <h3>出錯了！</h3> <div> <p>系統出錯，請聯絡管理員。</p> <p><span id="mes">20</span>秒鐘後返回首頁</p> </div> </div> </body> </html>
<span style="font-family:Microsoft YaHei;font-size:18px;">/*
* 建立人：琚建飛
* 建立時間：2016年10月5日13:06:30
*/
body {
}
#errorfrm p span {
color:#f00;
font-size:20px;
font-weight:bold;
}
#errorfrm {
text-align: center;
}</span>效果動態圖展示：
總結
剛接觸新東西，覺得都很有意思，這時候，還是多敲程式碼，多敲例子，實踐出真知。希望對你有幫助。