一个网页标题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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
vue实现购物车选择功能
Jan 10 Javascript
详解javascript脚本何时会被执行
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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
php 无极分类(递归)实现代码
2010/01/05 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
浅谈MySQL中的触发器
2015/05/05 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
python的slice notation的特殊用法详解
2019/12/27 Python
python小白学习包管理器pip安装
2020/06/09 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
成品仓管员岗位职责
2013/12/11 职场文书
小小商店教学反思
2014/04/27 职场文书
爱心捐助倡议书
2014/05/19 职场文书
运动会宣传口号
2014/06/09 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
党支部半年考察意见
2015/06/01 职场文书
飞屋环游记观后感
2015/06/08 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
浅析JavaScript中的变量提升
2022/06/01 Javascript