如何写一个网页标题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 ...
随机推荐
- Solr自动生成ID
在Solr中,每一个索引,都要有一个唯一的ID,类似于关系型数据库表中的主键.为了方便创建索引,需要配置自动生成的ID,即UUID. 一.配置schema.xml文件 添加uuid字段类型,修改字段i ...
- 推荐IOS开发3个工具:Homebrew、TestFight、Crashlytics-备
1. Homebrew 什么是Homebrew? Homebrew is the easiest and most flexible way to install the UNIX tools App ...
- 关于Bayes网络新解
经典贝叶斯网络 贝叶斯分类器的分类原理是通过某对象的先验概率,利用贝叶斯公式计算出其后验概率,即该对象属于某一类的概率,选择具有最大后验概率的类作为该对象所属的类.目前研究较多的贝叶斯分类器主要有四种 ...
- Android 自定义回调
刚开始接触的时候,觉得 回调 是一个很难理解的概念,之后就不停的上网查找回调的定义:(当你想要把具体的操作,让具体的人来完成,自己定义一个接口就好.使用的时候用接口,具体的人来实现你的接口,也就是实现 ...
- Unity3d中的Awake()、OnEnable()、Start()等默认函数的执行顺序和生命周期
Awake()在MonoBehavior创建后就立刻调用,在脚本实例的整个生命周期中,Awake函数仅执行一次:如果游戏对象(即gameObject)的初始状态为关闭状态,那么运行程序,Awake函数 ...
- c#使用spy进行模拟操作
很无奈,写了很长时间,最后保存时网页失去响应,真是要命呢.本来想就此放弃了,但是想还是粗略的重写一次吧,希望日后可以对朋友有一定的帮助. Microsoft.Spy工具是一个基础工具,我们简要介绍一下 ...
- PHP常用字符串函数
1:访问子字符串:strpos()2:提取子字符串:substr()3:逐字节处理字符串:strstr()4:计算字符串长度:strlen()5:替换子字符串:substr_replace()6:按字 ...
- Entity Framework with MySQL 学习笔记一(复杂类型 Complex Types)
有时候我们希望在sql一个表里面的column, 一部分被分化成另一个class 典型的例子是 Address 直接看代码: [Table("member")] public cl ...
- zoj 3647 Gao the Grid
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4837 先求出从所有点随机找出三个点的组合数,然后去掉共线的,平行好去掉,斜线就 ...
- QML控件类关系图
花了点时间整理了下QML控件之间的关系图和QML控件和C++类的对应关系,基于Qt5.6版本 其他版本可能会有差异 图片像素比较大,另存为后放大图片就可以看清楚了 工程下载地址 QMLClassDia ...