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里面即可
相关文章
详解WordPress开发中get_current_screen()函数的使用
这篇文章主要介绍了WordPress开发中get_current_screen()函数的使用,get_current_screen()通常在对象的实例化时使用,需要的朋友可以参考下2016-01-01浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
由于同源策略的缘故,ajax不能向不同域的网站发出请求。接下来通过本文给大家介绍jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法,需要的朋友可以参考下2017-02-02Javascript中类式继承和原型式继承的实现方法和区别之处
其它的面向对象程序设计语言都是通过关键字来解决继承的问题。但是javascript中并没有定义这种实现的机制。接下来通过本文给大家介绍Javascript中类式继承和原型式继承的实现方法和区别,需要的朋友可以参考下2017-04-04JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
这篇文章主要介绍了JavaScript基于activexobject连接远程数据库SQL Server 2014的方法,结合实例形式分析了javascript使用activexobject远程连接数据库的相关操作技巧,需要的朋友可以参考下2017-07-07
最新评论