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 相关文章推荐
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
js动态创建标签示例代码
Jun 09 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
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基础学习笔记
2007/03/18 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
Three.js基础部分学习
2017/01/08 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
Python 修改列表中的元素方法
2018/06/26 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
python的slice notation的特殊用法详解
2019/12/27 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
应届生英语教师求职信
2013/11/05 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
五一家具促销方案
2014/01/10 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
任命书怎么写
2014/06/04 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
离婚答辩状范文
2015/05/22 职场文书
2015年教师节主持词
2015/07/03 职场文书
签约仪式致辞
2015/07/30 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android