快捷導(dǎo)航

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

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

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

公司的項(xiàng)目中用到了這個(gè)新消息提示的效果，主要用于提示用戶(hù)有新消息。具體實(shí)現(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();
      //這里寫(xiě)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;
    //這里寫(xiě)Cookie操作
  }

};

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

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

另：?jiǎn)渭兊倪@個(gè)代碼會(huì)出現(xiàn)這么一個(gè)問(wèn)題：
就是當(dāng)你打開(kāi)一個(gè)站點(diǎn)很多張頁(yè)面的時(shí)候，如過(guò)有新消息，那么所有頁(yè)面都會(huì)不停的閃，當(dāng)你查看消息后其他頁(yè)面仍會(huì)提示。

我們公司是通過(guò)使用Cookie的方式解決的，當(dāng)查看新消息后所有標(biāo)題閃動(dòng)的頁(yè)面將全部取消提示。

下面腳本之家小編再推薦一段代碼

<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>

注意：上面的代碼需用預(yù)加載jquery庫(kù)才可以。直接放頁(yè)面底部或js里面即可

您可能感興趣的文章:

相關(guān)文章

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