js實現HTML標題欄中新消息提示效果

標題欄新消息提示如圖：

?

移民百科的項目中用到了這個新消息提示的效果，主要用于提示用戶有新消息。具體實現代碼如下：

?

新消息提示 var?newMessageRemind={
_step:?0,
_title:?document.title,
_timer:?null,
//顯示新消息提示
show:function(){
var?temps?=?newMessageRemind._title.replace("【　　　】",?"").replace("【新消息】",?"");
newMessageRemind._timer?=?setTimeout(function()?{
newMessageRemind.show();
//這里寫Cookie操作
newMessageRemind._step++;
if?(newMessageRemind._step?==?3)?{?newMessageRemind._step?=?1?};
if?(newMessageRemind._step?==?1)?{?document.title?=?"【　　　】"?+?temps?};
if?(newMessageRemind._step?==?2)?{?document.title?=?"【新消息】"?+?temps?};
},?800);
return?[newMessageRemind._timer,?newMessageRemind._title];
},
//取消新消息提示
clear:?function(){
clearTimeout(newMessageRemind._timer?);
document.title?=?newMessageRemind._title;
//這里寫Cookie操作
}

};

?加拿大技術移民將會被替代

調用顯示新消息提示：newMessageRemind.show();

調用取消新消息提示：newMessageRemind.clear();

查看demo：http://www.css88.com/demo/newMessageRemind/

另：單純的這個代碼會出現這么一個問題：
就是當你打開一個站點很多張頁面的時候，如過有新消息，那么所有頁面都會不停的閃，當你查看消息后其他頁面仍會提示。

我們公司是通過使用Cookie的方式解決的，當查看新消息后所有標題閃動的頁面將全部取消提示。

轉自? http://www.css88.com/archives/2963

posted on 2011-02-18 12:02 Lonely_Child 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/lonelyChild/archive/2011/02/18/1957675.html

總結

以上是生活随笔為你收集整理的js实现HTML标题栏中新消息提示效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。