一个网页标题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中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
javascript indexOf函数使用说明
Jul 03 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
JsRender实用入门教程
Oct 31 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
Vue修改项目启动端口号方法
Nov 07 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生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
实例解析php的数据类型
2018/10/24 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 如何访问外围作用域中的变量
2016/09/11 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
python 表格打印代码实例解析
2019/10/12 Python
python多维数组分位数的求取方式
2020/03/03 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
迟到检讨书大全
2014/01/25 职场文书
小学科学教学反思
2014/01/26 职场文书
消防器材管理制度
2014/01/28 职场文书
开业庆典策划方案
2014/02/18 职场文书
班级寄语大全
2014/04/10 职场文书
教师一帮一活动总结
2014/07/08 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
统计员岗位职责
2015/02/11 职场文书