一个网页标题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 图片上传预览-兼容标准
Jun 01 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
原生js实现购物车功能
Sep 23 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
如何用JavaScript实现一个数组惰性求值库
May 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&amp;mysql(五)
2006/10/09 PHP
php下使用SMTP发邮件的代码
2008/01/10 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
php实现的RSS生成类实例
2015/04/23 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
javascript 写类方式之七
2009/07/05 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
详解javascript遍历方式
2015/11/11 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
JS实现数组的增删改查操作示例
2018/08/29 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
详解python的内存分配机制
2021/05/10 Python
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android