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 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
javascript 常用功能总结
Mar 18 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
面试题:react和vue的区别分析
Apr 08 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
PHP 作用域解析运算符(::)
2010/07/27 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
php服务器的系统详解
2019/10/12 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
Javascript浅谈之this
2013/12/17 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
python 网络爬虫初级实现代码
2016/02/27 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Python 实现try重新执行
2019/12/21 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
教师申诉制度
2014/01/29 职场文书
行政助理的岗位职责
2014/02/18 职场文书
高中学生期末评语
2014/04/25 职场文书
2014年售票员工作总结
2014/11/19 职场文书
大学军训心得体会800字
2016/01/11 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
通过Python把学姐照片做成拼图游戏
2022/02/15 Python