让新消息在网页标题闪烁提示的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 相关文章推荐
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
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
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
详解Vue方法与事件
2017/03/09 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
angularJS开发注意事项
2018/05/26 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python算法之图的遍历
2017/11/16 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
在python image 中实现安装中文字体
2020/05/16 Python
python中有函数重载吗
2020/05/28 Python
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
酒店副总经理岗位职责范本
2014/02/04 职场文书
公司寄语大全
2014/04/10 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
社区服务标语
2014/07/01 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
新员工入职感言范文!
2019/07/04 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
python中redis包操作数据库的教程
2022/04/19 Python