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 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
vue实现修改图片后实时更新
Nov 14 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
php实现微信公众号无限群发
2015/10/11 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
对python的输出和输出格式详解
2018/12/08 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Python发送邮件实现基础解析
2020/08/14 Python
SQL语言面试题
2013/08/27 面试题
高校毕业生自我鉴定
2013/10/27 职场文书
汽车专业毕业生自荐信
2013/11/03 职场文书
商务会议邀请函
2014/01/09 职场文书
给孩子的新年寄语
2014/04/08 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
后备干部推荐材料
2014/12/24 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
旷工辞退通知书
2015/04/17 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
python异常中else的实例用法
2021/06/15 Python