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


Posted in Javascript onJune 06, 2014

公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息。具体实现代码如下:

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里面即可

Javascript 相关文章推荐
js列举css中所有图标的实现代码
Jul 04 Javascript
js中typeof的用法汇总
Dec 12 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 #Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 #Javascript
javascript中的return和闭包函数浅析
Jun 06 #Javascript
seaJs的模块定义和模块加载浅析
Jun 06 #Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 #Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 #Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 #Javascript
You might like
用PHP连接Oracle数据库
2006/10/09 PHP
谈谈PHP语法(5)
2006/10/09 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
J2EE面试题
2016/03/14 面试题
干部年终考核评语
2015/01/04 职场文书
英文产品推荐信
2015/03/27 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
舞出我人生观后感
2015/06/16 职场文书