让新消息在网页标题闪烁提示的jQuery代码


Posted in Javascript onNovember 04, 2013

可能有一些站长会注意到这样的效果,就是我们在一些SNS社交、社区论坛浏览时,经常会看到收到的新消息会闪烁标题提示,那么这样的效果我们能不能运用在自己的网站呢,新消息在网页标题闪烁显示的效果如何实现?小编有幸在某牛人技术博客看到这样的代码,基于jquery框架。

为解决一些网页特效运行后不能显示效果(例如:jQuery则需要刷新)问题,三水点靠木特别新增网页版演示。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<title>My JSP 'test.jsp' starting page</title> 
</head> 
<body> 
<p style="text-align: center;"> 
请看网页标题处效果! 
<br /> 
隔10秒后提示消失 
</p> 
<script type="text/javascript" 
src="script/jquery-2.0.3.js"> 
</script> 
<script type="text/javascript"> (function($) { 
$.extend( { 
/** 
* 调用方法: var timerArr = $.blinkTitle.show(); 
* $.blinkTitle.clear(timerArr); 
*/ 
blinkTitle : { 
show : function() { //有新消息时在title处闪烁提示 
var step = 0, _title = document.title; 
var timer = setInterval(function() { 
step++; 
if (step == 3) { 
step = 1 
} 
if (step == 1) { 
document.title = '【
 】' + _title 
} 
if (step == 2) { 
document.title = '【新消息】' + _title 
} 
}, 500); 
return [ timer, _title ]; 
}, 
/** 
* @param timerArr[0], timer标记 
* @param timerArr[1], 初始的title文本内容 
*/ 
clear : function(timerArr) { //去除闪烁提示,恢复初始title文本 
if (timerArr) { 
clearInterval(timerArr[0]); 
document.title = timerArr[1]; 
} 
} 
} 
}); 
})(jQuery); 
// Resources from https://3water.com/down 
jQuery(function($) { 
var timerArr = $.blinkTitle.show(); 
setTimeout(function() { //此处是过一定时间后自动消失 
$.blinkTitle.clear(timerArr); 
}, 10000); 
//若认为操作消失,只需如此调用: $.blinkTitle.clear(timerArr); 
}); 
</script> 
<br /> 
<center> 
如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码: 
<a href='https://3water.com/' target='_blank'>https://3water.com/</a> 
</center> 
</body> 
</html>
Javascript 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
js的三种继承方式详解
Jan 21 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 #Javascript
浅析return false的正确使用
Nov 04 #Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 #Javascript
js中apply方法的使用详细解析
Nov 04 #Javascript
js数组操作学习总结
Nov 04 #Javascript
Javascript执行效率全面总结
Nov 04 #Javascript
jquery的map与get方法详解
Nov 04 #Javascript
You might like
收音机的保养
2021/03/01 无线电
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
PHP中的类型约束介绍
2015/05/11 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
探究Python中isalnum()方法的使用
2015/05/18 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
批评与自我批评总结
2014/10/17 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书