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时间下拉框小例子
Apr 15 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
Vant picker 多级联动操作
Nov 02 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
Smarty模板类内部原理实例分析
2019/07/03 PHP
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
Python操作json的方法实例分析
2018/12/06 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
Python如何读取、写入JSON数据
2020/07/28 Python
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
单位领导证婚词
2014/01/14 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
2014年党课学习材料
2014/05/11 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
生物工程专业求职信
2014/09/03 职场文书
庆祝国庆节标语
2014/10/09 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
应聘教师自荐信
2015/03/26 职场文书
于丹讲座视频观后感
2015/06/15 职场文书