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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
javascript数据类型验证方法
Dec 31 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 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写的MySQL数据库用户认证系统代码
2007/03/22 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
Python新手实现2048小游戏
2015/03/31 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python基础教程之异常详解
2019/01/10 Python
Python验证码截取识别代码实例
2020/05/16 Python
英国手机零售商:Metrofone
2019/03/18 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
自我评价正确写法范文
2013/12/10 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
通用自荐信范文
2014/03/14 职场文书
故意伤害辩护词
2015/05/21 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书