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();

另：單純的這個代碼會出現(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里面即可

您可能感興趣的文章: