一个网页标题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 26 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
vue实现图片懒加载的方法分析
Feb 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
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
使用Python写CUDA程序的方法
2017/03/27 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python 安装移动复制第三方库操作
2020/07/13 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
全球性的女装店:storets
2019/06/12 全球购物
企业宣传方案
2014/03/04 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
node快速搭建后台的实现步骤
2022/02/18 NodeJs
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers