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 相关文章推荐
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
关于vue-router路径计算问题
May 10 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
万能的php分页类
2017/07/06 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
react系列从零开始_简单谈谈react
2017/07/06 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
使用Python更换外网IP的方法
2018/07/09 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
python实例化对象的具体方法
2020/06/17 Python
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
实习教师自我鉴定
2013/12/12 职场文书
洗发水广告词
2014/03/13 职场文书
支行行长竞聘报告
2014/11/06 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
个人求职意向书
2015/05/11 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python