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 相关文章推荐
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
vue实现搜索过滤效果
May 28 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python日期的加减等操作的示例
2017/08/15 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Python读取实时数据流示例
2019/12/02 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
公司感恩节活动策划书
2014/10/11 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
飞越疯人院观后感
2015/06/09 职场文书
子女赡养老人协议书
2016/03/23 职场文书