通过网页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的闪动提示的更多相关文章

  1. 如何写一个网页标题title的闪动提示(转)

    通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见.如何实现则个功能呢? 思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ...

  2. 网页标题title的闪动提示

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  3. 转---写一个网页进度loading

    作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...

  4. 写一个网页进度loading

    作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...

  5. 自己写一个网页版的Markdown实时编辑器

    这几天忙着使用Python+Django+sqlite 搭建自己的博客系统,但是单纯的使用H5的TextArea,简直太挫了有木有.所以,就想模仿一下人家内嵌到网页上的Markdown编辑器,从而让自 ...

  6. 用原生JS写一个网页版的2048小游戏(兼容移动端)

    这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...

  7. 网页标题(title)动态改变

    这是一只小白的突发奇想,实验多次终于有所效果.想要实现什么效果呢, 如图所示 :    要实现这个效果,大体需要两步. 第一,如何像打印似的一个一个字显示文字.要实现这个效果有多种方法.在这里我所运用 ...

  8. python写一个网页翻译器

    import urllib.requesturl='https://fanyi.baidu.com/v2transapi'data={}data['i']=opdata['from']='AUTO'd ...

  9. html网页标题

    HTML代码 <html> <head> <!--<title>定义网页标题,显示在浏览器的标题--> <title>网页标题</ti ...

随机推荐

  1. DotNET知识点总结三(笔记整合)

    使用接口的注意事项: 接口中的成员不能加访问修饰符 接口中的成员不能有任何实现 实现接口的子类必须实现接口的全部成员 一个类可以同时继承一个类并实现多个接口,如果一个子类同时继承了父类A,并实现了接口 ...

  2. 剑指offer之关于整数的处理

    首先是整数次方的处理 在这处理的时候有几个细节主义处理 1.当指数是负数的时候 2.当指数式0的时候 3.当不满足条件的时候要抛出异常 再一个就是常用的将一个树化为二进制的形式,或者是求整数的幂或者矩 ...

  3. Altium Designer 里面怎么画等长线

    (1)一般是将走线布完后,新建一个class. Design -> Classes 如上图添加完后可以点击close. (2)快捷键 T + R: 或者 点击Tools 下拉中的Interact ...

  4. WIN7下关闭驱动数字签名检查的方法

    内容是转的,最后一步貌似没什么用处,水印是去不掉的,不过也无所谓,关键是驱动能用了,要不完全瞎了 实测win7 32位旗舰版可用   ================================= ...

  5. QComboBox调用clear函数崩溃的问题

    项目有个需求是这样的: QComboBox需要动态清楚添加Item列表,并且之前设置了QComboBox当前index改变的信号,一旦这个clear调用,当前index就改变,因为一旦改变,信号就发出 ...

  6. 使用activeMQ实现jms

    一:jms介绍         jms说白了就是java message service,是J2EE规范的一部分,跟jdbc差不多,sun只提供了接口,由各个厂商(provider)来进行具体的实现, ...

  7. BZOJ3399: [Usaco2009 Mar]Sand Castle城堡

    3399: [Usaco2009 Mar]Sand Castle城堡 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 22  Solved: 17[Sub ...

  8. MFC断点无效

    方法1: 将出问题的CPP文件用系统记事本notepad打开,然后另存时选择unicode编码保存,覆盖掉原来的文件即可.一般这种方法一般会解决VS断点无法设定的80%问题.没有办法才请出第2种方法. ...

  9. Android手机音量的控制

    1.AudioManager audio=(AudioManager) super.getSystemService(Context.AUDIO_SERVICE);//获得手机的声音服务 //设置加音 ...

  10. cocos2d-x多分辨率适配原理分析(2.0.4之后的版本)

    2013年11月4日补充: 之前写这篇博客的时候其实我还没有开始过真正的去做一个项目,主要过程还是偏向于理解原理.前几天在准备练练手时回过头来想了下这个问题,发现又有点一头雾水了,所以我觉得之前我并没 ...