一个网页标题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 相关文章推荐
IE8 中使用加速器(Activities)
May 14 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
JavaScript实现栈结构详细过程
Dec 06 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
Python使用Supervisor来管理进程的方法
2015/05/28 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
tensorflow如何批量读取图片
2019/08/29 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
如何用Django处理gzip数据流
2021/01/29 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
车辆年检委托书范本
2014/10/14 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL