一个网页标题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 相关文章推荐
JS完成代码前最好对其做5件事
Apr 07 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
js css自定义分页效果
Feb 24 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
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 闭包特性在实际应用中的问题
2009/10/30 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
js实现旋转木马效果
2017/03/17 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
python中模块查找的原理与方法详解
2017/08/11 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
python和php哪个更适合写爬虫
2020/06/22 Python
python和go语言的区别是什么
2020/07/20 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
如何在C# winform中异步调用web services
2015/09/21 面试题
北京振戎融通Java面试题
2015/09/03 面试题
研究生自我鉴定范文
2013/10/30 职场文书
教师的实习鉴定
2013/12/15 职场文书
英语简历自我评价
2014/01/26 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
事业单位聘任报告
2015/03/02 职场文书
入队仪式主持词
2015/07/04 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
2019财务毕业实习报告
2019/06/27 职场文书