HTML網(wǎng)頁(yè)編程之自動(dòng)刷新

頁(yè)編程之自動(dòng)刷新。

各位同學(xué)好，今天我們來(lái)分享一下如何設(shè)置網(wǎng)頁(yè)自動(dòng)刷新和延時(shí)跳轉(zhuǎn)。我們都知道，在瀏覽器中點(diǎn)擊刷新按鈕或者按下F5鍵可以刷新頁(yè)面，但在編程中有時(shí)需要自動(dòng)刷新頁(yè)面，加載最新的數(shù)據(jù)，無(wú)需用戶參與。這就是我們今天要講的內(nèi)容。

接下來(lái)讓我們來(lái)看看效果如何。

·首先，在頁(yè)面上添加了一個(gè)滾動(dòng)字幕和一張GIF動(dòng)畫，用于展示頁(yè)面的刷新狀態(tài)。

·現(xiàn)在可以看到，每隔3秒自動(dòng)刷新一次，每當(dāng)刷新時(shí)，字幕會(huì)回到初始位置，動(dòng)畫也會(huì)重新播放。

·如果不明顯，可以看到鼠標(biāo)指到的位置會(huì)不停地觸發(fā)刷新按鈕，效果已經(jīng)很明顯了。

現(xiàn)在讓我們來(lái)看看實(shí)現(xiàn)代碼。自動(dòng)刷新使用了meta標(biāo)簽的http-equiv屬性，值為referesh，表示自動(dòng)刷新。設(shè)置了content屬性，在內(nèi)容中填寫秒數(shù)，即每隔多少秒自動(dòng)刷新頁(yè)面。如果設(shè)置為3，則每隔3秒自動(dòng)刷新頁(yè)面，非常簡(jiǎn)單。

·延時(shí)跳轉(zhuǎn)的實(shí)現(xiàn)也很簡(jiǎn)單。剛才已經(jīng)將Content屬性設(shè)置為3，現(xiàn)在只需要指定要跳轉(zhuǎn)到的URL。它的寫法是在3后面加上一個(gè)英文分號(hào)，然后加上url等于要跳轉(zhuǎn)到的地址。在這里，我們跳轉(zhuǎn)到新浪首頁(yè)，例如視頻。這樣寫好后，回到瀏覽器保存，可以看到倒計(jì)時(shí)321，成功跳轉(zhuǎn)。在指定時(shí)間后，瀏覽器會(huì)自動(dòng)跳轉(zhuǎn)，功能已經(jīng)實(shí)現(xiàn)。

今天的分享就到這里，希望各位同學(xué)可以照著寫3遍，做到不看視頻也能寫出來(lái)。所有案例和相關(guān)文檔都可以向我索取。

我們下期再見，想學(xué)編程可以關(guān)注網(wǎng)頁(yè)編程、服務(wù)端編程、數(shù)據(jù)庫(kù)和算法方面的內(nèi)容。

點(diǎn)贊支持一下。

文為大家介紹三種 js 刷新當(dāng)前頁(yè)面的方法：

reload() 方法;

replace() 方法;

頁(yè)面自動(dòng)刷新;

方法1：reload() 方法

reload()方法用于刷新當(dāng)前文檔。

reload() 方法類似于你瀏覽器上的刷新頁(yè)面按鈕。

location.reload();

方法2：replace() 方法

replace() 方法可用一個(gè)新文檔取代當(dāng)前文檔。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>replace() 方法</title>
<script>
function replaceDoc(){
window.location.replace("http://www.xxxxxx.com")
}
</script>
</head>
<body>
<input type="button" value="載入新文檔替換當(dāng)前頁(yè)面" onclick="replaceDoc()">
</body>
</html>

方法3：頁(yè)面自動(dòng)刷新

頁(yè)面自動(dòng)刷新：把如下代碼加入<head>區(qū)域中

<meta http-equiv="refresh" content="5">

其中5指每隔5秒刷新一次頁(yè)面。

天分享一個(gè)實(shí)現(xiàn)頁(yè)面自動(dòng)檢測(cè)更新，而且不需要?jiǎng)臃?wù)端代碼的方法，比較取巧，在非覆蓋式發(fā)布的情況下可以簡(jiǎn)單使用。

背景和思路

有部分運(yùn)營(yíng)是不刷新頁(yè)面的，當(dāng)我們前端資源更新了，他可能還在使用老的資源。

目標(biāo)是希望在我們前端資源更新的時(shí)候提示用戶有資源更新，然后刷新頁(yè)面獲取最新的前端資源。

一個(gè)適合非覆蓋式發(fā)布的前端應(yīng)用的自動(dòng)檢測(cè)更新方法。

覆蓋式發(fā)布	前后兩次發(fā)布的資源沒有差異，js 資源也不使用 hash 進(jìn)行區(qū)分
非覆蓋式發(fā)布	前后兩次發(fā)布的資源會(huì)有差異，比如體現(xiàn)在 js 資源帶上 hash 或者發(fā)布的版本號(hào)

所以，我們以構(gòu)建之后 js 資源帶 hash 的頁(yè)面為例，如果有新的發(fā)布，那么 js 資源的鏈接就會(huì)發(fā)生改變，通過(guò)比較前后兩次的資源地址來(lái)判斷頁(yè)面是否發(fā)布。

構(gòu)建之后是帶 hash 的資源文件

代碼

在線咨詢

上一篇：Pandas中的寶藏函數(shù)（apply）
下一篇：2023年鄭州前端培訓(xùn)機(jī)構(gòu)排名中，實(shí)力最強(qiáng)的總是這幾

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML網(wǎng)頁(yè)編程之自動(dòng)刷新

背景和思路

代碼

您的項(xiàng)目需求