JS实现闪动的title消息提醒效果


Posted in Javascript onJune 20, 2014

有时候我们需要提醒用户,有新的消息,这个可以使用下面的方法实现。

效果就是网页窗口在没有获取焦点并且最小化的时候,网页窗口的标题栏“title”显示的内容为“【 】”,“【新消息】”的闪烁效果。

<script language="JavaScript"> 
setTimeout('flash_title()',2000); //2秒之后调用一次
function flash_title() 
{ 
  //当窗口效果为最小化,或者没焦点状态下才闪动
  if(isMinStatus() || !window.focus)
  {
    newMsgCount();
  }
  else
  {
    document.title='订单管理中心-AOOXING';//窗口没有消息的时候默认的title内容
    window.clearInterval();
  }
} 
//消息提示
var flag=false;
function newMsgCount(){
  if(flag){
    flag=false;
    document.title='【新订单】';
  }else{
    flag=true;
    document.title='【 】';
  }
  window.setTimeout('flash_title(0)',380); 
}
//判断窗口是否最小化
//在Opera中还不能显示
var isMin = false;
function isMinStatus() {
  //除了Internet Explorer浏览器,其他主流浏览器均支持Window outerHeight 和outerWidth 属性
  if(window.outerWidth != undefined && window.outerHeight != undefined){
    isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
  }else{
    isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
  }
  //除了Internet Explorer浏览器,其他主流浏览器均支持Window screenY 和screenX 属性
  if(window.screenY != undefined && window.screenX != undefined ){
    isMin = window.screenY < -30000 && window.screenX < -30000;//FF Chrome       
  }else{
    isMin = window.screenTop < -30000 && window.screenLeft < -30000;//IE
  }
  return isMin;
}
</script>
Javascript 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
基于redis的小程序登录实现方法流程分析
May 25 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 #Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 #Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 #Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 #Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 #Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 #Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 #Javascript
You might like
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
js图片预加载示例
2014/04/30 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Win8下python3.5.1安装教程
2020/07/29 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
给老婆的婚前保证书
2014/02/01 职场文书
质量承诺书格式
2014/05/20 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
Django实现翻页的示例代码
2021/05/24 Python
整理Python中常用的conda命令操作
2021/06/15 Python