js版

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

  <meta charset="UTF-8">

    <title>无标题页</title>

   <script>

//页面激活判断

var hiddenProperty = 'hidden' in document ? 'hidden' :

    'webkitHidden' in document ? 'webkitHidden' :

    'mozHidden' in document ? 'mozHidden' :

    null;

var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');

var onVisibilityChange = function(){

    if (!document[hiddenProperty]) {

        console.log('页面非激活');

    }else{

        alert('页面激活')

        console.log('页面激活');

    }

}

document.addEventListener(visibilityChangeEvent, onVisibilityChange);

//网站标题闪动提示

var g_blinkid = 0;

var g_blinkswitch = 0;

var g_blinktitle = document.title;

var g_onlineuser = "";

var g_sysmsg_sound = null;

var g_newmsg_sound = null;

var g_app_num = 0;

var g_appnum = 0;

var g_bappmore = false;

var g_inputtime = 0;

function blinkNewMsg()

{

 document.title = g_blinkswitch % 2==0 ? "【　　　】 - " + g_blinktitle : "【新消息】 - " + g_blinktitle;

 g_blinkswitch++;

}

 g_blinkid = setInterval(blinkNewMsg, 1000);

function stopBlinkNewMsg()

{

    if (g_blinkid)

    {

        clearInterval(g_blinkid);

        g_blinkid = 0;

        document.title = g_blinktitle;

    }

}

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input id="Button1" type="button" value="button" onclick="stopBlinkNewMsg();" />

    </div>

    </form>

</body>

</html>

jquery版，记得要引入jquery.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

  <meta charset="UTF-8">

<base href="<%=basePath%>">

<title>网页标题</title>

</head>

<body>

<p style="text-align: center;">

请看网页标题处效果！

<br />

隔10秒后提示消失

</p>

<script type="text/javascript" src="jquery-3.1.1.min.js">

</script>

<script type="text/javascript"> 

(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); 

jQuery(function($) {

var timerArr = $.blinkTitle.show();

setTimeout(function() { //此处是过一定时间后自动消失

$.blinkTitle.clear(timerArr);

}, 10000);

//若认为操作消失，只需如此调用： $.blinkTitle.clear(timerArr);

});

</script>

<br />

<center>

如不能显示效果，请按Ctrl+F5刷新本页

</center>

</body>

</html>

js和jquery 实现网站来消息网站标题闪动提示的更多相关文章

  1. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  2. 《fullPage.js》创建全屏滚动的网站

    插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...

  3. 【干货】教你如何利用fullPage.js以及move.js插件打造高端大气的网站效果！

    前言: 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次. 在学习过jQuery插件之后,才发现之前的很多网站特效完全可 ...

  4. 基于jQuery适合做图片类网站的特效

    分享一款基于jquery适合做图片类网站的特效.这是一款鼠标经过图片滑动弹出标题效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="c ...

  5. js判断是手机还是电脑访问网站

    js判断是手机还是电脑访问网站                               <script type="text/javascript"> <!- ...

  6. jquery中邮箱地址 URL网站地址正则验证实例代码

    QQ网站有一个网站举报的功能,看了一些js代码觉得写得很不错,我就拿下来了,下面是一个email验证与url网址验证js代码,分享给大家 email地址验证 复制代码代码如下: function ch ...

  7. spark读取 kafka nginx网站日志消息 并写入HDFS中（转）

    原文链接:spark读取 kafka nginx网站日志消息 并写入HDFS中 spark 版本为1.0 kafka 版本为0.8 首先来看看kafka的架构图 详细了解请参考官方 我这边有三台机器用 ...

  8. ecshop transport.js 和 jquery 冲突解决办法

    您提供一个简单的解决transport.js 和 jquery 方法: 在 page_header.lbi 库文件中加入如下代码,注意操作顺序: 1.先导入transport.js  文件 {inse ...

  9. js和jquery中有关透明度操作的问题

    在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置       透明度在IE浏览器 ...

随机推荐

  1. 牛客练习赛22 C 简单瞎搞题

    //位运算 // & 都是1 才是 1 // | 都是0 才是0 // ^ 不一样才是1 #include <iostream> #include <cstdio> # ...

  2. Linux任务计划、周期性任务执行

    Linux任务计划.周期性任务执行 周期性任务执行: cron 守护进程(crond):服务,不间断地运行于后台 # service crond {start|stop|status|restart} ...

  3. nginx的常用负载均衡算法，分别是

    随机分配,hash一致性分配,最小连接数分配,主备分配 随机,轮训,一致性哈希,主备,https://blog.csdn.net/liu88010988/article/details/5154741 ...

  4. day03 set集合，文件操作，字符编码以及函数式编程

    嗯哼,第三天了 我们来get 下新技能,集合,个人认为集合就是用来list 比较的,就是把list 转换为set 然后做一些列表的比较啊求差值啊什么的. 先看怎么生成集合: list_s = [1,3 ...

  5. Python学习-day4

    学习装饰器,首先听haifeng老师讲解了一下准备知识. 1.函数即变量 2.高阶函数+嵌套函数==>装饰器 装饰器的作用是在,1)不改变源代码,2)不改变原函数的调用方式的前提下为函数增加新的 ...

  6. MySQL将内存用在了哪里

    本片文章参考官网讲述MySQL是如何分配内部内存,同时涉及到如何合适设的置内存分配以及如何监控内存的使用情况 官方文档 MySQL在启动时默认被分配给512MB RAM,可以通过设置相关内存参数对其进 ...

  7. hdu6035[dfs+思维] 2017多校1

    /*hdu6035[dfs+思维] 2017多校1*/ //合并色块, 妙啊妙啊 #include<bits/stdc++.h> using namespace std; ; const ...

  8. 【Luogu】P2389电脑班的裁员（DP）

    题目链接 sbt交了三遍才过是我的耻辱…… 就是设f[i][j]搞个三重循环DP一下,以上. #include<cstdio> #include<cstdlib> #inclu ...

  9. Codeforces 899D Shovel Sale

    题目大意 给定正整数 $n$($2\le n\le 10^9$). 考虑无序整数对 $(x, y)$($1\le x,y\le n, x\ne y$). 求满足 「$x+y$ 结尾连续的 9 最多」的 ...

  10. ACM程序设计选修课——1030: Hungar的时尚球场（水题+耐心）

    1030: Hungar的时尚球场 Time Limit: 1 Sec  Memory Limit: 64 MB Submit: 14  Solved: 8 [Submit][Status][Web ...