一个网页标题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中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
js本地图片预览实现代码
Oct 09 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 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 zend 相对路径问题
2009/01/12 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
vue移动端使用canvas签名的实现
2020/01/15 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
python采集微信公众号文章
2018/12/20 Python
python实现简易淘宝购物
2019/11/22 Python
python标识符命名规范原理解析
2020/01/10 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
爱普生美国官网:Epson美国
2018/11/05 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
餐饮业会计岗位职责
2013/12/19 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
小学生检讨书大全
2014/02/06 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
离婚起诉状范本
2015/05/19 职场文书
绿里奇迹观后感
2015/06/15 职场文书
新闻通讯稿范文
2015/07/22 职场文书