<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>My JSP 'test.jsp' starting page</title>
</head>
<body>
   <p style="text-align: center;">
      请看网页标题处效果！
      <br />
      隔10秒后提示消失
   </p>
<script src="https://lib.baomitu.com/jquery/1.9.1/jquery.min.js"></script>
<script>

    (function($) {
        $.extend( {
            /**
             * 调用方法： var timerArr = $.blinkTitle.show();
             * $.blinkTitle.clear(timerArr);
             */
            blinkTitle : {
                show : function() { //有新消息时在title处闪烁提示
                    var step = 0, _title = document.title;
                    var timer = setInterval(function() {
                        step++;
                        if (step == 3) {
                            step = 1
                        }

                        if (step == 1) {
                            document.title = '【　　　】' + _title
                        }

                        if (step == 2) {
                            document.title = '【新消息】' + _title
                        }

                    }, 500);
                    return [ timer, _title ];
                },
                /**
                 * @param timerArr[0], timer标记
                 * @param timerArr[1], 初始的title文本内容
                 */
                clear : function(timerArr) { //去除闪烁提示，恢复初始title文本
                    if (timerArr) {
                        clearInterval(timerArr[0]);
                        document.title = timerArr[1];
                    }

                }
            }
        });
    })(jQuery);
    // Resources from http://www.ui3g.com
    jQuery(function($) {
        var timerArr = $.blinkTitle.show();
        setTimeout(function() { //此处是过一定时间后自动消失
            $.blinkTitle.clear(timerArr);
        }, 10000);
      //若认为操作消失，只需如此调用： $.blinkTitle.clear(timerArr);
    });
</script>
<br />
<center>
   如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：
   <a href='http://www.ui3g.com/' target='_blank'>http://www.ui3g.com/</a>
</center>
</body>
</html>

jQuery闪烁提示，让新消息在网页标题显示的更多相关文章

  1. Jquery闪烁提示特效

    样式:.red{ border:1px solid #d00; background:#ffe9e8; color:#d00;} function shake(ele,cls,times){ var ...

  2. Jquery toastr提示框

    toastr是一个基于JQuery的消息提示插件; 1. 下载toastr和jquery https://jquery.com/download/ https://codeseven.github.i ...

  3. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

  4. electron实现类似QQ来新消息时的闪烁与任务栏窗口提醒

    公司项目有一款带即时聊天.群组功能的APP,因为要给客服人员使用,需要开发PC版本.之前使用C#开发过一个PC版本,但是C#的UI这一块支持的不太好,而且升级比较麻烦,我就牵头基于Electron去实 ...

  5. Android BGABadgeView：新消息/未接来电/未读消息/新通知圆球红点提示（1）

     Android BGABadgeView:新消息/未接来电/未读消息/新通知圆球红点提示(1) 现在很多的APP会有新消息/未接来电/未读消息/新通知圆球红点提示,典型的以微信.QQ新消息提示为 ...

  6. HubSpot – 网站开发必备的 jQuery 信息提示库

    HubSpot 一款功能丰富的 jQuery 消息提示插件.它可以帮助你个性化显示您的应用程序的事务性消息.您可以轻松地包裹 Ajax 请求进度,成功和错误消息,还可以添加操作链接到您的消息中. Hu ...

  7. 如何写一个网页标题title的闪动提示(转)

    通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见.如何实现则个功能呢? 思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ...

  8. 如何写一个网页标题title的闪动提示

    通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见.如何实现则个功能呢? 思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ...

  9. 几个 jQuery 小提示和技巧

    几个 jQuery 小提示和技巧 今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 H ...

随机推荐

  1. CodeForces 719B Anatoly and Cockroaches (水题贪心)

    题意:给定一个序列,让你用最少的操作把它变成交替的,操作有两种,任意交换两种,再就是把一种变成另一种. 析:贪心,策略是分别从br开始和rb开始然后取最优,先交换,交换是最优的,不行再变色. 代码如下 ...

  2. .NET Core 3.0之深入源码理解Configuration(二)

      文件型配置基本内容 上一篇文章讨论了Configuration的几个核心对象,本文继续讨论Configuration中关于文件型配置的相关内容.相比较而言,文件型配置的使用场景更加广泛,用户自定义 ...

  3. E20170404-gg

    margin  外边,外埔 padding 内铺 inherit v 继承

  4. Codeforces711C 【DP】

    题意: 有n个点,m种颜色,你要给n个点上没有颜色的点染色.每个点i对应染的颜色j有一个颜料消耗,p[i][j]是点i染成j颜色的花费,你必须保证有k段颜色的点,输出最少花费多少颜料. 还有一个就是本 ...

  5. POJ2533/hdoj1950【DP】

    O(nlog(n))的方法: 定义d[k]:长度为k的上升子序列的最末元素,若有多个长度为k的上升子序列,则记录最小的那个最末元素. d中元素也是单调递增的. #include <iostrea ...

  6. 洛谷P3209 [HNOI2010]平面图判定（2-SAT）

    传送门 看到哈密顿回路就被吓傻了……结果没有好好考虑性质…… 首先,平面图有个性质:边数小于等于$3n-6$(我也不知道为啥),边数大于这个的直接pass 然后考虑原图,先把哈密顿回路单独摘出来,就是 ...

  7. 同一台服务器上部署多个Tomcat的配置修改方法

    同一服务器部署多个tomcat时,存在端口号冲突的问题,所以需要修改tomcat配置文件server.xml,以tomcat7为例. 首先了解下tomcat的几个主要端口: <Server po ...

  8. 易爆物（X-Plosives ）基础并查集

    #include <iostream> #include <algorithm> using namespace std; + ; int fa[maxn]; int Find ...

  9. Codeforces Round #402 (Div. 2) D

    Description Little Nastya has a hobby, she likes to remove some letters from word, to obtain another ...

  10. Maxim Buys an Apartment CodeForces - 854B

    题意:已知一条街上有n幢房子,依次的编号为1~n,其中有k幢已经卖出去了但是不知道是哪k幢.当且仅当一幢房子没有卖出去且其两旁至少有一幢房子卖出去了的时候,认为这幢房子是好的.问这n幢房子中好的房子最 ...