一个网页标题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实现控制经纬度显示地图与卫星
May 20 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 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自动重命名文件实现方法
2014/11/04 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
javascript中的this详解
2014/12/08 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
Python Web版语音合成实例详解
2019/07/16 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
大学生创业计划书的格式要求
2013/12/29 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
图书馆标语
2014/06/19 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
报到证办理个人委托书
2014/10/06 职场文书
个人作风建设总结
2014/10/23 职场文书
大学生年度个人总结
2015/02/15 职场文书
体育委员竞选稿
2015/11/21 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
mysql函数全面总结
2021/11/11 MySQL