一个网页标题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实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
删除节点的jquery代码
Jan 13 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
javascript拖拽应用实例
Mar 25 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 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中使用Oracle数据库(2)
2006/10/09 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
通过隐藏option实现select的联动效果
2009/11/10 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
js继承实现方法详解
2016/12/16 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
python基于phantomjs实现导入图片
2016/05/13 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
python如何进入交互模式
2020/07/06 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
委托书范本
2014/09/13 职场文书
致运动员加油稿
2015/07/21 职场文书
关于空气污染危害的感想
2015/08/11 职场文书