一个网页标题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 相关文章推荐
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
JS解析XML实例分析
Jan 30 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
微信小程序实现左右列表联动
May 19 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 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递归函数返回值使用方法
2013/02/18 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
js实现验证码功能
2020/07/24 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
办公室经理岗位职责
2014/01/01 职场文书
简历的自我评价范文
2014/02/04 职场文书
贷款担保申请书
2014/05/20 职场文书
商场促销活动策划方案
2014/08/18 职场文书
毕业生党员个人总结
2015/02/14 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang