js實現(xiàn)的標題欄新消息閃爍提示效果

更新時間：2014年06月06日 11:37:51 投稿：junjie

這篇文章主要介紹了js實現(xiàn)的標題欄新消息閃爍提示效果,一些大型網(wǎng)站也會經(jīng)常用到這個效果,需要的朋友可以參考下

公司的項目中用到了這個新消息提示的效果，主要用于提示用戶有新消息。具體實現(xiàn)代碼如下：

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操作
  }

};

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

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

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

我們公司是通過使用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里面即可

您可能感興趣的文章:

相關(guān)文章

Javascript的動態(tài)增加類的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫avascript的動態(tài)增加類的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
基于Next.js實現(xiàn)在線Excel的詳細代碼
Next.js是一款React 開發(fā)框架，它可以幫助我們構(gòu)建 React 應用程序。作為一個輕量級React服務端渲染應用框架，這篇文章主要介紹了基于?Next.js實現(xiàn)在線Excel,需要的朋友可以參考下
2022-08-08
一文學會JavaScript如何手寫防抖節(jié)流
其實防抖和節(jié)流不僅僅在面試中會讓大家手寫，在實際項目中也可以起到性能優(yōu)化的作用，所以還是很有必要掌握的。這篇文章就帶大家徹底學會JavaScript手寫防抖節(jié)流，希望對大家有所幫助
2022-11-11
JavaScript對象的創(chuàng)建模式與繼承模式示例講解
繼承機制是面向?qū)ο蟪绦蛟O計使代碼可以復用的最重要的手段，它允許程序員在保持原有的特性基礎上進行擴展，增加功能，這樣產(chǎn)生新的類，稱作是派生類。繼承呈現(xiàn)了面向?qū)ο蟪绦蛟O計的層析結(jié)構(gòu)，體現(xiàn)了由簡單到復雜的認知過程。繼承是類設計層次的復用
2022-12-12
【經(jīng)驗總結(jié)】編寫JavaScript代碼時應遵循的14條規(guī)律
這篇文章主要介紹了編寫JavaScript代碼時應遵循的14條規(guī)律,涉及javascript變量的定義,函數(shù)、表單、json的使用,邏輯運算與頁面元素操作技巧等,非常具有實用價值,需要的朋友可以參考下
2016-06-06
self.attachevent is not a function的解決方法
今天一個客戶用chrome瀏覽器訪問網(wǎng)站，他的網(wǎng)站js提示self.attachevent is not a function，這個問題就是這個瀏覽器不支持attachevent，可以通過如下方法解決了，分享一下,需要的朋友可以參考下
2017-04-04
js+數(shù)組實現(xiàn)網(wǎng)頁上顯示時間/星期幾的實用方法
在網(wǎng)頁上顯示時間(年月日/時分秒),很多新手朋友都想實現(xiàn)這樣的功能，本文整理了一些實用技巧，殺出來與大家分享，感興趣的朋友可以了解下
2013-01-01
javascript類型系統(tǒng)_正則表達式RegExp類型詳解
下面小編就為大家?guī)硪黄猨avascript類型系統(tǒng)_正則表達式RegExp類型詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
uni-app實現(xiàn)點贊評論功能
這篇文章主要介紹了uni-app實現(xiàn)點贊評論功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
一個Action如何調(diào)用兩個不同的方法
這篇文章主要介紹了一個Action如何調(diào)用兩個不同的方法,需要的朋友可以參考下
2014-05-05