一个网页标题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 相关文章推荐
列表内容的选择
Jun 30 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
HTML+JS实现在线朗读器
Feb 15 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
php5.2时间相差8小时
2007/01/15 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
php解决安全问题的方法实例
2019/09/19 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
JsChart组件使用详解
2018/03/04 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
python实现人工蜂群算法
2020/09/18 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
如何用JQuery进行表单验证
2013/05/29 面试题
关于爱国的标语
2014/06/24 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电