一个网页标题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时间验证和转换工具小例子
Jul 01 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
vue 限制input只能输入正数的操作
Aug 05 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读取excel文件的简单实例
2013/08/26 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
比较完整的微信开发php代码
2016/08/02 PHP
JQuery 入门实例1
2009/06/25 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
python实现的文件夹清理程序分享
2014/11/22 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Python中的Numpy矩阵操作
2018/08/12 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
python可迭代对象去重实例
2020/05/15 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
工程监理应届生求职信
2013/11/09 职场文书
运动会通讯稿300字
2014/02/02 职场文书
同意报考证明
2015/06/17 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
python数字图像处理之图像的批量处理
2022/06/28 Python