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 相关文章推荐
用JavaScript实现动画效果的方法
Jul 20 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
JS图片懒加载技术实现过程解析
Jul 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在线打包程序源码
2008/07/27 PHP
一个PHP的String类代码
2010/04/20 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
php中异常处理方法小结
2015/01/09 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
详解jquery和vue对比
2019/04/16 jQuery
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python交易记录链的实现过程详解
2019/07/03 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
暑期社会实践学生的自我评价
2014/01/09 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript