一个网页标题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 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
VSCode配置react开发环境的步骤
Dec 27 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
JS常用排序方法实例代码解析
Mar 03 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递归实现无限分类 格式化数组的详解
2013/06/08 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
jQuery 选择器理解
2010/03/16 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python 错误和异常小结
2013/10/09 Python
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python中的各种装饰器详解
2015/04/11 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
详解python的四种内置数据结构
2019/03/19 Python
如何提高MySql的安全性
2014/06/19 面试题
工作疏忽检讨书
2014/01/25 职场文书
团支部建设方案
2014/05/02 职场文书
离婚财产分配协议书
2014/10/21 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
Java并发编程必备之Future机制
2021/06/30 Java/Android