如何写一个网页标题title的闪动提示
通过网页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){}对它进行特殊处理了
火狐,chrome下没问题,ie当提示消息中有一个或没有半角字符时没问题。
<p>显示信息数:<input id='textMsgs' value='3' /></p>
<button title="开始闪动" onclick="flashTitle('您有' + document.getElementById('textMsgs').value + '条新信息');">开始闪动</button>
<button title="停止闪动" onclick="stopFlash();">停止闪动</button>
<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>
如何写一个网页标题title的闪动提示的更多相关文章
- 如何写一个网页标题title的闪动提示(转)
通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见.如何实现则个功能呢? 思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ...
- 网页标题title的闪动提示
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 转---写一个网页进度loading
作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...
- 写一个网页进度loading
作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...
- 自己写一个网页版的Markdown实时编辑器
这几天忙着使用Python+Django+sqlite 搭建自己的博客系统,但是单纯的使用H5的TextArea,简直太挫了有木有.所以,就想模仿一下人家内嵌到网页上的Markdown编辑器,从而让自 ...
- 用原生JS写一个网页版的2048小游戏(兼容移动端)
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
- 网页标题(title)动态改变
这是一只小白的突发奇想,实验多次终于有所效果.想要实现什么效果呢, 如图所示 : 要实现这个效果,大体需要两步. 第一,如何像打印似的一个一个字显示文字.要实现这个效果有多种方法.在这里我所运用 ...
- python写一个网页翻译器
import urllib.requesturl='https://fanyi.baidu.com/v2transapi'data={}data['i']=opdata['from']='AUTO'd ...
- html网页标题
HTML代码 <html> <head> <!--<title>定义网页标题,显示在浏览器的标题--> <title>网页标题</ti ...
随机推荐
- ng-options
tr td 地点 td select.form-control(required="true" ng-model="addkc.dd" ng-options=& ...
- c++(smart pointer)
(一)首先对智能指针有一些概念性的了解 **********本部分内容摘自开源中国社区http://my.oschina.net/u/158589/blog/28994******** 1.什么是智能 ...
- ChangeServiceConfig2 function
ChangeServiceConfig2 function Changes the optional configuration parameters of a service. Syntax C ...
- live555的编译及使用
live555是个流媒体C++开源库,VLC的Meida Player就使用了它的API完成的RTSP客户端,由于VLC的SDK没有提供相关record流到视频文件的API,所以我想用过live555 ...
- 学习下关于ViewStub实例的用法及带Drawable的TextView的妙用
在项目中,我们可能有多种数据来源比如: 里面有ListView也有当获得数据为空的时候显示的空信息.根据点击的项目还是差事不同,显示的空消息也不同.a.没有收藏的项目,b目前没有收藏的差事. 其实实现 ...
- 《SDN核心技术剖析和实战指南》2.2OpenFlow交换机规范小结
这节的内容相当多,主要是介绍OpenFlow标准特别是流表的相关特性. 典型的OpenFlow标准由三部分组成:安全通道,流表和OpenFlow协议.注意这个标准是一份设备标准,并不单指OpenFlo ...
- 联系我们_你我想法_【有男度】UNANDU 100%进口 全球设计师品牌精汇 男装_男装搭配_时尚男装_品牌男装_男装搭配技巧_男装网站
联系我们_你我想法_[有男度]UNANDU 100%进口 全球设计师品牌精汇 男装_男装搭配_时尚男装_品牌男装_男装搭配技巧_男装网站 联系我们 2012-02-17 国内北京公司总部 邮编 ...
- java,大数据批量插入、更新
public void exec(Connection conn){ try { conn.setAutoCommit(false); Long beginTime = System.currentT ...
- php防sql注入、xss
php自带的几个防止sql注入的函数http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2013/0318/12234.html addslashe ...
- MySQL删除外键定义的方法
MySQL外键在定以后,如果我们不再需要这个外键,可以进行删除操作,下面就为您介绍MySQL删除外键定义的方法,供您参考. 不知道大家有没有发现,在定义外键的时候articles.member_id外 ...