一个网页标题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 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 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中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
python创建关联数组(字典)的方法
2015/05/04 Python
在python中bool函数的取值方法
2018/11/01 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
胡桃夹子观后感
2015/06/11 职场文书
企业宣传稿范文
2015/07/23 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
python状态机transitions库详解
2021/06/02 Python