让新消息在网页标题闪烁提示的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 相关文章推荐
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
详解javascript高级定时器
Dec 31 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
JavaScript严格模式详解
Jan 16 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
Vue的Options用法说明
Aug 14 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
javascript new 需不需要继续使用
2009/07/02 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
python实现的一个火车票转让信息采集器
2014/07/09 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
Python中正则表达式详解
2017/05/17 Python
Python_LDA实现方法详解
2017/10/25 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
python re.match()用法相关示例
2021/01/27 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
C语言笔试集
2012/07/24 面试题
行政人员工作职责
2013/12/05 职场文书
我为自己代言广告词
2014/03/18 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书