一个网页标题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防止退格键网页后退的实现代码
Mar 23 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
express框架下使用session的方法
Jul 31 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
Vue实现附件上传功能
May 28 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的栏目导航程序
2006/10/09 PHP
php5.3 废弃函数小结
2010/05/16 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
ES6 十大特性简介
2020/12/09 Javascript
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
秋天的图画教学反思
2014/05/01 职场文书
环保口号大全
2014/06/12 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
英文产品推荐信
2015/03/27 职场文书
办公室岗位职责范本
2015/04/11 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
Redis批量生成数据的实现
2022/06/05 Redis