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 相关文章推荐
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
node.js如何操作MySQL数据库
Oct 29 Javascript
JS 基本概念详细介绍
Oct 16 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数据缓存技术
2007/02/14 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
php使用codebase生成随机数
2014/03/25 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
基于Require.js使用方法(总结)
2017/10/26 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
vue实现文件上传功能
2018/08/13 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
Python dict的常用方法示例代码
2020/06/23 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript