一个网页标题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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
js确定对象类型方法
Mar 30 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
js常用DOM方法详解
Feb 04 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
Vue项目中如何引入icon图标
Mar 28 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
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
实用函数8
2007/11/08 PHP
php浏览历史记录的方法
2015/03/10 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
Python内置random模块生成随机数的方法
2019/05/31 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
啤酒销售实习自我鉴定
2013/09/24 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
钱学森观后感
2015/06/04 职场文书
公司庆典主持词
2015/07/04 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
人生感悟经典句子
2019/08/20 职场文书
python数字图像处理:图像简单滤波
2022/06/28 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers