一个网页标题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 相关文章推荐
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
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
一个简单计数器的源代码
2006/10/09 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
JQuery 入门实例1
2009/06/25 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
python开启多个子进程并行运行的方法
2015/04/18 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
python绘制雪景图
2019/12/16 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python实现像awk一样分割字符串
2020/09/15 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
个人授权委托书范本
2014/04/03 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
迁户口计划生育证明
2014/10/19 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏