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实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
详解如何运行vue项目
Apr 15 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 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中删除、清空session的方式总结
2015/10/09 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
JS变量提升及函数提升实例解析
2020/09/03 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
python字典序问题实例
2014/09/26 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
pytorch之添加BN的实现
2020/01/06 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
自我评价格式
2014/01/06 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
说明书格式及范文
2014/05/07 职场文书
技术比武方案
2014/05/19 职场文书
解放思想演讲稿
2014/09/11 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
二胎满月酒致辞
2015/07/29 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL