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 相关文章推荐
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
vue接口请求加密实例
Aug 11 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
JavaScript中的Proxy对象
Nov 27 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实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
php实现微信模板消息推送
2018/03/30 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
React 子组件向父组件传值的方法
2017/07/24 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
pygame实现成语填空游戏
2019/10/29 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
《与象共舞》教学反思
2014/02/24 职场文书
小学节能减排倡议书
2014/05/15 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
汽车转让协议书
2015/01/29 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
五年级数学教学反思
2016/02/16 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
go goroutine 怎样进行错误处理
2021/07/16 Golang
Golang数据类型和相互转换
2022/04/12 Golang
netty 实现tomcat的示例代码
2022/06/05 Servers