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 事件对象的实现
Jul 13 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
javascript 简练的几个函数
Aug 29 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
树结构之JavaScript
Jan 24 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
python使用tornado实现简单爬虫
2018/07/28 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
护士辞职信模板
2014/01/20 职场文书
50岁生日感言
2014/01/23 职场文书
办公室文员工作职责
2014/01/31 职场文书
作文评语大全
2014/04/23 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
python非标准时间的转换
2021/07/25 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang