一个网页标题title的闪动提示效果实现思路


Posted in Javascript onMarch 22, 2014

通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见。如何实现则个功能呢?

思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ,并与空格来回切换。例:【你有新消息】与【

 】切换。提示内容弄是动态的,所以替换文字的空格数目也是算出的。这里用全角的空格。但是如果提示消息中有‘数字'等半角字符的话就会出现问题。全角的空格比半角的1的宽度要宽的多。这样的话,闪动起来看着就不是很舒服;解决方法就是用全角的空格替换全角的字符,半角的空格替换半角的字符。
但是document.title=' ';不论半角空格有多少个,浏览器只显示一个。用 的话,它原样输出;只能用var t=document.getElementsByTagName('title')[0]。获取title dom对象,通过 t.innerHTML=' '来修改。

但会这么顺利么,当然不会。我们可爱的ie在这个时候总会出来捣乱。在ie浏览器下title的innerHTML是只读的(不光是title,其它的如:COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TR的innerHTML属性是只读的)。如果强制赋值的话会出现“未知的运行时错误”。目前我也没有找到很到的办法,只能加上try{}catch(e){}对它进行特殊处理了
分享下源代码:

<script type="text/javascript" language="javascript"> 
var flashTitlePlayer = { 
start: function (msg) { 
this.title = document.title; 
if (!this.action) { 
try { 
this.element = document.getElementsByTagName('title')[0]; 
this.element.innerHTML = this.title; 
this.action = function (ttl) { 
this.element.innerHTML = ttl; 
}; 
} catch (e) { 
this.action = function (ttl) { 
document.title = ttl; 
} 
delete this.element; 
} 
this.toggleTitle = function () { 
this.action('【' + this.messages[this.index = this.index == 0 ? 1 : 0] + '】欢迎访问简明现代魔法'); 
}; 
} 
this.messages = [msg]; 
var n = msg.length; 
var s = ''; 
if (this.element) { 
var num = msg.match(/\w/g); 
if (num != null) { 
var n2 = num.length; 
n -= n2; 
while (n2 > 0) { 
s += " "; 
n2--; 
} 
} 
} 
while (n > 0) { 
s += ' '; 
n--; 
}; 
this.messages.push(s); 
this.index = 0; 
this.timer = setInterval(function () { 
flashTitlePlayer.toggleTitle(); 
}, 1000); 
}, 
stop: function () { 
if (this.timer) { 
clearInterval(this.timer); 
this.action(this.title); 
delete this.timer; 
delete this.messages; 
} 
} 
}; 
function flashTitle(msg) { 
flashTitlePlayer.start(msg); 
} 
function stopFlash() { 
flashTitlePlayer.stop(); 
} 
</script>

火狐,chrome下没问题,ie当提示消息中有一个或没有半角字符时没问题。
Javascript 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
浅谈javascript错误处理
Aug 11 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
js获得网页背景色和字体色的方法
Mar 21 #Javascript
页面装载js及性能分析方法介绍
Mar 21 #Javascript
Js冒泡事件详解及阻止示例
Mar 21 #Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 #Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 #Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 #Javascript
将中国标准时间转换成标准格式的代码
Mar 20 #Javascript
You might like
php中static静态变量的使用方法详解
2010/06/04 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
php实现留言板功能
2017/03/05 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
Python实现把数字转换成中文
2015/06/29 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
Flask之请求钩子的实现
2018/12/23 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
python多进程间通信代码实例
2019/09/30 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
什么是Python包的循环导入
2020/09/08 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
厂长岗位职责
2014/02/19 职场文书
责任书范本大全
2015/05/11 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
2016新年问候语大全
2015/11/11 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书