一个网页标题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实现点击同时更改两个iframe的网址
Jul 01 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
解析vue中的$mount
Dec 21 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 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的简单方法
2014/03/04 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
vue mounted组件的使用
2018/06/18 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
Python编写打字训练小程序
2019/09/26 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
基于python实现复制文件并重命名
2020/09/16 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
MIS软件工程师的面试题
2016/04/22 面试题
个人找工作自荐信格式
2013/09/21 职场文书
夜大毕业自我鉴定
2013/10/11 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
个人校本研修方案
2014/05/26 职场文书
大专生找工作自荐书
2014/06/10 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
模范班主任事迹材料
2014/12/17 职场文书
学生退学证明
2015/06/23 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python