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 相关文章推荐
JavaScript脚本性能优化注意事项
Nov 18 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
react 创建单例组件的方法
Apr 26 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 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
Wordpress php 分页代码
2009/10/21 PHP
如何让CI框架支持service层
2014/10/29 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
python获取本机外网ip的方法
2015/04/15 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Python字典遍历操作实例小结
2019/03/05 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
集团公司总经理岗位职责
2013/12/20 职场文书
营业员岗位职责
2015/02/11 职场文书
红歌会主持词
2015/07/02 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python