让新消息在网页标题闪烁提示的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模板来展现json数据的代码
Oct 22 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 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
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
python进阶之自定义可迭代的类
2019/08/20 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
Python二元算术运算常用方法解析
2020/09/15 Python
Python ellipsis 的用法详解
2020/11/20 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
实习生自荐信范文
2013/11/13 职场文书
幼教个人求职信范文
2013/12/02 职场文书
运动会广播稿80字
2014/01/23 职场文书
考核评语大全
2014/04/29 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
保险专业求职信
2014/07/07 职场文书
联谊活动总结范文
2015/05/09 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
python某漫画app逆向
2021/03/31 Python
Python 如何安装Selenium
2021/05/06 Python
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python