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基础整理1
Dec 06 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
js调用网络摄像头的方法
Dec 05 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 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
Python字符遍历的艺术
2008/09/06 Python
Python标准异常和异常处理详解
2015/02/02 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
python如何对链表操作
2020/10/10 Python
pytorch简介
2020/11/11 Python
Shell如何接收变量输入
2016/08/06 面试题
程序员跳槽必看面试题总结
2013/06/28 面试题
生物制药专业求职信
2014/03/11 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
学校百日安全活动总结
2015/05/07 职场文书
毕业实习感受与体会
2015/05/26 职场文书
对学校的意见和建议
2015/06/04 职场文书
环保宣传语大全
2015/07/13 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android