HTML页面的自动刷新以及跳转
生活随笔
收集整理的這篇文章主要介紹了
HTML页面的自动刷新以及跳转
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
當我們在做網頁時，有的時候想讓網頁自動不停刷新，或者過一段時間自動跳轉到另外一個你自己設定的頁面？其實實現這個效果不算難。一下代碼給大家參考，互相學習。
1：頁面自動刷新：把如下代碼加入頭部文件（）中：
<meta http-equiv="refresh" content="5">其中5指每隔5秒刷新一次頁面.
2：頁面自動跳轉：把如下代碼加入頭部文件（）中：
<meta http-equiv="refresh"content="5;url=http://www.w3school.com.cn/">其中5指隔5秒后跳轉到指定的：http://www.w3school.com.cn/頁面。
3：頁面自動刷新(JS代碼)：
<!DOCTYPE html> <html> <head> <title>幾秒后跳轉.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body bgcolor="#33ccff"><script type="text/javascript">function delayURL(url) {var delay = document.getElementById("time").innerHTML;//最后的innerHTML不能丟，否則delay為一個對象 if (delay > 0) {delay--;document.getElementById("time").innerHTML = delay;} else {window.top.location.href = url;}setTimeout("delayURL('" + url + "')", 1000);//此處1000毫秒即每一秒跳轉一次 }</script><div style="text-align: center; margin-top: 200px;"><span id="time" style="background: red">5</span>秒鐘之后自動跳轉，如果不跳轉，請點擊下面鏈接<a href="./login.jsp">點擊鏈接快速跳轉</a></div><script type="text/javascript">delayURL("./login.jsp");</script> </body> </html>注意：這里自己放個超鏈接就OK，我寫的是登錄頁面。
效果如下圖：
?
?
2019年9月25日更新：
添加“3：頁面自動刷新(JS代碼)”的測試地址：https://codepen.io/yansheng836/pen/dybrdyV
?
總結
以上是生活随笔為你收集整理的HTML页面的自动刷新以及跳转的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机器学习之决策树算法详解
- 下一篇： 嵌入式人脸识别sdk，支持前端、后端ap