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

 更新时间:2014年06月06日 11:37:51   投稿:junjie  
这篇文章主要介绍了js实现的标题栏新消息闪烁提示效果,一些大型网站也会经常用到这个效果,需要的朋友可以参考下

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

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的动态增加类的实现方法

    下面小编就为大家带来一篇Javascript的动态增加类的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 基于Next.js实现在线Excel的详细代码

    基于Next.js实现在线Excel的详细代码

    Next.js是一款React 开发框架,它可以帮助我们构建 React 应用程序。作为一个轻量级React服务端渲染应用框架,这篇文章主要介绍了基于 Next.js实现在线Excel,需要的朋友可以参考下
    2022-08-08
  • 一文学会JavaScript如何手写防抖节流

    一文学会JavaScript如何手写防抖节流

    其实防抖和节流不仅仅在面试中会让大家手写,在实际项目中也可以起到性能优化的作用,所以还是很有必要掌握的。这篇文章就带大家彻底学会JavaScript手写防抖节流,希望对大家有所帮助
    2022-11-11
  • JavaScript对象的创建模式与继承模式示例讲解

    JavaScript对象的创建模式与继承模式示例讲解

    继承机制是面向对象程序设计使代码可以复用的最重要的手段,它允许程序员在保持原有的特性基础上进行扩展,增加功能,这样产生新的类,称作是派生类。继承呈现了面向对象程序设计的层析结构,体现了由简单到复杂的认知过程。继承是类设计层次的复用
    2022-12-12
  • 【经验总结】编写JavaScript代码时应遵循的14条规律

    【经验总结】编写JavaScript代码时应遵循的14条规律

    这篇文章主要介绍了编写JavaScript代码时应遵循的14条规律,涉及javascript变量的定义,函数、表单、json的使用,逻辑运算与页面元素操作技巧等,非常具有实用价值,需要的朋友可以参考下
    2016-06-06
  • self.attachevent is not a function的解决方法

    self.attachevent is not a function的解决方法

    今天一个客户用chrome浏览器访问网站,他的网站js提示self.attachevent is not a function,这个问题就是这个浏览器不支持attachevent,可以通过如下方法解决了,分享一下,需要的朋友可以参考下
    2017-04-04
  • js+数组实现网页上显示时间/星期几的实用方法

    js+数组实现网页上显示时间/星期几的实用方法

    在网页上显示时间(年月日/时分秒),很多新手朋友都想实现这样的功能,本文整理了一些实用技巧,杀出来与大家分享,感兴趣的朋友可以了解下
    2013-01-01
  • javascript类型系统_正则表达式RegExp类型详解

    javascript类型系统_正则表达式RegExp类型详解

    下面小编就为大家带来一篇javascript类型系统_正则表达式RegExp类型详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • uni-app实现点赞评论功能

    uni-app实现点赞评论功能

    这篇文章主要介绍了uni-app实现点赞评论功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 一个Action如何调用两个不同的方法

    一个Action如何调用两个不同的方法

    这篇文章主要介绍了一个Action如何调用两个不同的方法,需要的朋友可以参考下
    2014-05-05

最新评论