一个网页标题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 动态调整图片尺寸实现代码
Dec 28 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
JS中字符串trim()使用示例
May 26 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
PHP 实例化类的一点摘记
2008/03/23 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
PHP与以太坊交互详解
2018/08/24 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
vue实现简单图片上传
2020/06/30 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
python处理json数据中的中文
2014/03/06 Python
python如何查看微信消息撤回
2018/11/27 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
2014村务公开实施方案
2014/02/25 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
干部培训简讯
2015/07/20 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
话题作文之自信作文
2019/11/15 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js