一个网页标题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据option的value值快速设定初始的selected选项
Aug 13 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 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
模拟xcopy的函数
2006/10/09 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
python中self原理实例分析
2015/04/30 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
Python如何发布程序的详细教程
2018/10/09 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
党员思想汇报范文
2013/12/30 职场文书
关于打架的检讨书
2014/01/17 职场文书
初三班主任寄语大全
2014/04/04 职场文书
干部对照检查材料范文
2014/08/26 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
python 中yaml文件用法大全
2021/07/04 Python
mysql 排序失效
2022/05/20 MySQL