让新消息在网页标题闪烁提示的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 相关文章推荐
js模拟滚动条(横向竖向)
Feb 22 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
分析javascript原型及原型链
Mar 18 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
vue的webcamjs集成方式
Nov 16 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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
提升PHP速度全攻略
2006/10/09 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
JavaScript的Cookies
2008/01/16 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
浅析JS运动
2015/12/28 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
python中while循环语句用法简单实例
2015/05/07 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
如何利用python查找电脑文件
2018/04/27 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python实现抖音点赞功能
2019/04/07 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
年度考核自我鉴定
2014/02/02 职场文书
《猫》教学反思
2014/02/26 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
户外活动总结
2015/02/04 职场文书
工程部岗位职责范本
2015/04/11 职场文书
行政答辩状范文
2015/05/21 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
使用Python获取字典键对应值的方法
2022/04/26 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python