一个网页标题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 27 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
详细分析jsonp的原理和实现方式
Nov 20 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
js事件机制----捕获与冒泡机制实例分析
May 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
提高php运行速度的一些小技巧分享
2012/07/03 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
prototype Element学习笔记(篇二)
2008/10/26 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
详解Python中的join()函数的用法
2015/04/07 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
使用python求解二次规划的问题
2020/02/29 Python
省级青年文明号申报材料
2014/05/23 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
安全责任协议书范本
2016/03/23 职场文书
Python time库的时间时钟处理
2021/05/02 Python
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript
docker 制作mysql镜像并自动安装
2022/05/20 Servers