網頁標題出現資訊提醒例項程式碼

antzone發表於2017-03-13
網頁

對於網頁標題中出現資訊提示的現象大家應該不會陌生，比如你是某一個網站的會員，如果站點向您傳送站內資訊的時候，可能就會在標題欄出現一個醒目的動態提醒表示，本站也具有此功能。這樣的效果比較人性化，因為提醒效果更明顯，下面就簡單介紹一下如何實現此效果。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<script type="text/javascript"> 
var newMessageRemind={ 
  _step:0, 
  _title:document.title, 
  _timer:null, 
  show:function(){ 
   var temps=newMessageRemind._title.replace("【　　　】", "").replace("【新訊息】", ""); 
   newMessageRemind._timer=setTimeout(function(){  
     newMessageRemind._step++; 
     if(newMessageRemind._step==3) {newMessageRemind._step = 1}; 
     if(newMessageRemind._step==1) {document.title="【　　　】"+temps}; 
     if(newMessageRemind._step==2) { document.title = "【新訊息】"+temps}; 
     newMessageRemind.show();
   }, 800); 
}, 
clear:function(){ 
   clearTimeout(newMessageRemind._timer); 
   document.title=newMessageRemind._title; 
} 
}; 
newMessageRemind.show(); 
function clearNewMessageRemind()
{ 
  newMessageRemind.clear(); 
} 
window.onload=function()
{
  var bt=document.getElementById("bt");
  bt.onclick=function()
  {
    clearNewMessageRemind();
  }
}
</script> 
<head/>
<body>
<input type="button" id="bt" value="取消資訊提醒" />
</body>
</html>

以上程式碼是實現了我們想要的效果，在標題欄會出現閃動的資訊提醒效果，下面簡單介紹一下是西安過程:

一.實現原理:

原理非常的簡單，儘管標題看起來是動態的，其實並非有個內容在標題處有跳動效果，而是不斷的使用定時器函式操縱一個函式，被操作的函式可以以遞迴的方式輪番往復的實現標題內容替換，原理大體如此，具體可以參閱程式碼註釋。

二.程式碼註釋:

1.var newMessageRemind={}，建立一個物件直接量，裡面封裝有我們需要的操作程式碼。

2._step:0，宣告一個step屬性並賦值為0，這裡用作一個標記，在不同的標記下title內容不同，也就是實現了標題內容閃動的效果。

3._title:document.title，宣告一個屬性，並將屬性值賦值為當前title值。

4. _timer:null，宣告一個屬性，並將屬性值設定為null，用來儲存定時器函式的返回值。

5.show:function(){})，此函式是實現此效果的核心。

6.var temps=newMessageRemind._title.replace("【　　　】", "").replace("【新訊息】", "")，對標題進行替換，也就是講標題中的【　　　】或者【新訊息】替換為空，替換後的字串就是標題的"後半截"（大家應該能明白）

7.newMessageRemind._timer=setTimeout(function(){},800),在800毫秒後執行函式。

8.newMessageRemind._step++，屬性值加1.

9.if(newMessageRemind._step==3) {newMessageRemind._step=1},如果屬性值達到3，就將其重置為1。

10.if(newMessageRemind._step==1) {document.title="【　　　】"+temps}，當屬性值為1的時候，進行字串連線。

11.if(newMessageRemind._step==2) { document.title = "【新訊息】"+temps}，當屬性為2的時候，進行字串連線。

12.newMessageRemind.show()，再呼叫函式本身，這樣就可以往復迴圈呼叫。

13.clear:function(){}，次函式可以關閉跳動效果。

14.clearTimeout(newMessageRemind._timer)，停止setTimeout()函式的執行。

15.document.title=newMessageRemind._title，設定網頁的title。

16.newMessageRemind.show()，執行show函式。

17.function clearNewMessageRemind(){ newMessageRemind.clear(); } ，此函式作為按鈕的click事件處理函式，可以停止跳動效果。

三.相關閱讀:

1.replace()函式可以參閱JavaScript replace()一章節。

2. setTimeout()函式可以參閱window setTimeout()一章節。

3.clearTimeout()函式可以參閱window clearTimeout()一章節。

相關文章