公司的項目中用到了這個新消息提示的效果,主要用于提示用戶有新消息。具體實現代碼如下:
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();
另:單純的這個代碼會出現這么一個問題:
就是當你打開一個站點很多張頁面的時候,如過有新消息,那么所有頁面都會不停的閃,當你查看消息后其他頁面仍會提示。
我們公司是通過使用Cookie的方式解決的,當查看新消息后所有標題閃動的頁面將全部取消提示。
下面武林網小編再推薦一段代碼
<script>(function() { var OriginTitile = document.title, titleTime; document.addEventListener('visibilitychange', function() { if (document.hidden) { document.title = '死鬼去哪里了!'; clearTimeout(titleTime); } else { document.title = '(つェ⊂)咦!又好了!'; titleTime = setTimeout(function() { document.title = OriginTitile; },2000); } });})();</script>
注意:上面的代碼需用預加載jquery庫才可以。直接放頁面底部或js里面即可
新聞熱點
疑難解答