首页 > 上网技巧 > 电脑小技巧 > js实现的标题栏提示商务通新消息闪烁提示效果

js实现的标题栏提示商务通新消息闪烁提示效果

时间:2014-08-18 10:26 作者:QQ地带 我要评论

这篇文章主要介绍了js实现的标题栏新消息闪烁提示效果,一些大型网站也会经常用到这个效果,需要的朋友可以参考下.
公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息。具体实现代码如下:
代码如下:
 
  1. var newMessageRemind = { 
  2.     _step: 0, 
  3.     _title: document.title, 
  4.     _timer: null, 
  5.     //显示新消息提示 
  6.     show: function() { 
  7.         var temps = newMessageRemind._title.replace("【   】", "").replace("【新消息】", ""); 
  8.         newMessageRemind._timer = setTimeout(function() { 
  9.             newMessageRemind.show(); 
  10.             //这里写Cookie操作 
  11.             newMessageRemind._step++; 
  12.             if (newMessageRemind._step == 3) { 
  13.                 newMessageRemind._step = 1 
  14.             }; 
  15.             if (newMessageRemind._step == 1) { 
  16.                 document.title = "【   】" + temps 
  17.             }; 
  18.             if (newMessageRemind._step == 2) { 
  19.                 document.title = "【新消息】" + temps 
  20.             }; 
  21.         }, 
  22.         800); 
  23.         return [newMessageRemind._timer, newMessageRemind._title]; 
  24.     }, 
  25.     //取消新消息提示 
  26.     clear: function() { 
  27.         clearTimeout(newMessageRemind._timer); 
  28.         document.title = newMessageRemind._title; 
  29.         //这里写Cookie操作 
  30.     } 
  31. }; 
 
调用显示新消息提示:newMessageRemind.show();
调用取消新消息提示:newMessageRemind.clear();
 
另:单纯的这个代码会出现这么一个问题:
就是当你打开一个站点很多张页面的时候,如过有新消息,那么所有页面都会不停的闪,当你查看消息后其他页面仍会提示。
我们公司是通过使用Cookie的方式解决的,当查看新消息后所有标题闪动的页面将全部取消提示。

标签: JS
顶一下
(2)
100%
踩一下
(0)
0%

Google提供的广告