JS实现闪动的title消息提醒效果

有时候我们需要提醒用户，有新的消息，这个可以使用下面的方法实现。

效果就是网页窗口在没有获取焦点并且最小化的时候，网页窗口的标题栏“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>
赞 (0)

相关推荐

  • javascript 带有滚动条的表格,标题固定,带排序功能.

    复制代码 代码如下: //使用要求: //1.将表格的Class命名为:sorttableHold, //2.表格放置在一个div中,此div设有overflow属性. //3.表格要求有ID,div要求有ID //4.要有JQuery.min.js文件 //5.OK. addEvent(window, "load", sortables_init); var SORT_COLUMN_INDEX; function sortables_init() { // Find all tabl

  • JS动态改变浏览器标题的方法

    本文实例讲述了JS动态改变浏览器标题的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <hea

  • javascript title闪动效果

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS实现title标题栏文字不间断滚动显示效果

    JS实现title标题栏文字不间断滚动显示效果

    本文实例讲述了JS实现title标题栏文字不间断滚动显示效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

  • JS实现消息来时让网页标题闪动效果的方法

    本文实例讲述了JS实现消息来时让网页标题闪动效果的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> <script> var g_blinkid = 0; var g_blinkswitch = 0; var g_blinktitle = doc

  • JavaScript实现标题栏文字轮播效果代码

    JavaScript实现标题栏文字轮播效果代码

    本文实例讲述了JavaScript实现标题栏文字轮播效果代码.分享给大家供大家参考,具体如下: 这里演示的JS文字轮播,显示在标题栏区域,以前个人主页时候经常见到的效果,不过现在都规范了,标题栏一般都不加入这种效果了.但是可以学习一下JS制作实现一些文字特效,运行效果后请查看标题栏. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-title-loop-show-style-demo/ 具体代码如下: <html> <head>

  • JS实现超简洁网页title标题跑动闪烁提示效果代码

    JS实现超简洁网页title标题跑动闪烁提示效果代码

    本文实例讲述了JS实现超简洁网页title标题跑动闪烁提示效果代码.分享给大家供大家参考,具体如下: 这里演示不几行JS代码实现的网页Title文字跑动效果,类似有消息时的标题闪烁提醒功能,在JS代码中,当变量_record累加到3是,将其赋值为1.相当于无限循环.需要显示的消息提示内容可自拟哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-title-blink-style-codes/ 具体代码如下: <html xmlns="

  • js实现网页标题栏闪烁提示效果实例分析

    本文实例讲述了js实现网页标题栏闪烁提示效果的方法.分享给大家供大家参考.具体分析如下: 网页标题栏闪烁效果我们在一些聊天工具会常看到,像现在流量的聊天室,下面我们就来给大家总结一款实现网页标题栏闪烁提示代码,感兴趣可参考一下. 公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息.具体实现代码如下: 复制代码 代码如下: var newMessageRemind={ _step: 0, _title: document.title, _timer: null, //显示新消息提示

  • JS实现闪动的title消息提醒效果

    有时候我们需要提醒用户,有新的消息,这个可以使用下面的方法实现. 效果就是网页窗口在没有获取焦点并且最小化的时候,网页窗口的标题栏"title"显示的内容为"[ ]","[新消息]"的闪烁效果. <script language="JavaScript"> setTimeout('flash_title()',2000); //2秒之后调用一次 function flash_title() { //当窗口效果为最小

  • 如何用原生js写一个弹窗消息提醒插件

    1.分析 当消息被触发的时候,会有一个自上而下的淡入过程. 在持续了一段时间后会自动的消失,或者是需要用户来手动的点击关闭按钮. 在消息消失的时候,会有一个自下而上的淡出过程. 消息是可以叠加弹出的,最新的消息会排在消息列表的最后面. 当前面的消息消失后,后面的消息会有一个向上滑动效果. 然后消息本身是有三部分组成 消息图标,用来区分不同类型的消息. 消息文本. 关闭按钮,并不是所有消息都需要关闭按钮. 2. 实现样式 那么,不管我们是用原生js还是vue,首先呢,我们都需要把这个消息的基本样式

  • Android实现消息提醒小红点效果

    Android实现消息提醒小红点效果

    本人分享一下,自己写的一个消息提醒小红点控件,支持圆.矩形.椭圆.圆角矩形.正方形五种图形样式,可带文字,支持链式操作. 先看一下实现效果,随便测了几个控件(TextView.ImageView.RadioButton.LinearLayout.RelativeLayout.FrameLayout),不确定其他会不会有问题. import android.content.Context; import android.graphics.Canvas; import android.graphic

  • Asp.net使用SignalR实现消息提醒

    Asp.net使用SignalR实现消息提醒

    一.引言 前面一篇文章我介绍了如何使用SignalR实现图片的传输,然后对于即时通讯应用来说,消息提醒是必不可少的.现在很多网站的都有新消息的提醒功能.自然对于SignalR系列也少不了这个功能的实现了.在这篇文章中将介绍如何使用SignalR+iNotify库来实现新消息的声音和弹框提醒. 二.消息提醒的实现思路 消息提醒也就是当客户有新消息来时,在客户端的右下角进行弹框提醒.要实现这个功能的思路是: 1.SignalR服务端推送消息到客户端的实现方式为调用客户端的receiveMessage

  • PHP实现RTX发送消息提醒的实例代码

    PHP实现RTX发送消息提醒的实例代码

    RTX是腾讯公司推出的企业级即时通信平台,大多数公司都在使用它,但是我们很多时候需要将自己系统或者产品的一些通知实时推送给RTX,这就需要用到RTX的服务端SDK,建议先去看看RTX的SDK开发文档(客户端,服务器),我们先看看功能效果:    当然,现在很多公司都已经在RTX的基础上升级成了企业微信,没关系,这个API同样可以使用,还是同样的接口,只是展示效果不一样而已: 下面是用PHP实现RTX发送消息提醒: 1.首先在服务器端安装RTX的服务端和客户端,再安装SDK开发包(对于发送消息提醒

  • Python实现Windows上气泡提醒效果的方法

    本文实例讲述了Python实现Windows上气泡提醒效果的方法.分享给大家供大家参考.具体实现方法如下: # -*- encoding: gbk -*- import sys import os import struct import time import win32con from win32api import * # Try and use XP features, so we get alpha-blending etc. try: from winxpgui import * e

  • jQuery实现鼠标移到元素上动态提示消息框效果

    当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery动态提示消息框效果</title><base target="_blank&qu

  • js简单的点击返回顶部效果实现方法

    本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部. 要点一:document.documentElement.clientWidth || docum

  • js实现左侧网页tab滑动门效果代码

    js实现左侧网页tab滑动门效果代码

    本文实例讲述了js实现左侧网页tab滑动门效果代码.分享给大家供大家参考.具体如下: 这是一款开口靠左的网页滑动门,网页滑动门,TAB滑动门,竖排滑动门菜单,竖排TAB选项卡,兼容IE6/IE7/FF/opera浏览器.其实竖排和横排的代码基本一样,只不过稍加修改就可以了.只要学会了一种滑动门,就能举一返三了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-tab-cha-style-codes/ 具体代码如下: <!DOCTY

随机推荐