標題欄新消息提示如圖：
公司的項目中用到了這個新消息提示的效果，主要用于提示用戶有新消息。具體實現代碼如下：
01 |
var newMessageRemind={ |
03 |
_title: document.title, |
07 |
var temps = newMessageRemind._title.replace("【 】", "").replace("【新消息】", ""); |
08 |
newMessageRemind._timer = setTimeout(function() { |
09 |
newMessageRemind.show(); |
11 |
newMessageRemind._step++; |
12 |
if (newMessageRemind._step == 3) { newMessageRemind._step = 1 }; |
13 |
if (newMessageRemind._step == 1) { document.title = "【 】" + temps }; |
14 |
if (newMessageRemind._step == 2) { document.title = "【新消息】" + temps }; |
16 |
return [newMessageRemind._timer, newMessageRemind._title]; |
20 |
clearTimeout(newMessageRemind._timer ); |
21 |
document.title = newMessageRemind._title; |
調用顯示新消息提示：newMessageRemind.show();
調用取消新消息提示：newMessageRemind.clear();
查看demo：http://www.css88.com/demo/newMessageRemind/
另：單純的這個代碼會出現這么一個問題：
就是當你打開一個站點很多張頁面的時候，如過有新消息，那么所有頁面都會不停的閃，當你查看消息后其他頁面仍會提示。
我們公司是通過使用Cookie的方式解決的，當查看新消息后所有標題閃動的頁面將全部取消提示。
聲明: 本文采用 BY-NC-SA 協議進行授權 | WEB前端開發
轉載請注明轉自《標題欄新消息提示效果》