js和jquery 实现网站来消息网站标题闪动提示
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 实现网站来消息网站标题闪动提示的更多相关文章
- jquery制作论坛或社交网站的每天打卡签到特效
效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...
- 《fullPage.js》创建全屏滚动的网站
插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...
- 【干货】教你如何利用fullPage.js以及move.js插件打造高端大气的网站效果!
前言: 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次. 在学习过jQuery插件之后,才发现之前的很多网站特效完全可 ...
- 基于jQuery适合做图片类网站的特效
分享一款基于jquery适合做图片类网站的特效.这是一款鼠标经过图片滑动弹出标题效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="c ...
- js判断是手机还是电脑访问网站
js判断是手机还是电脑访问网站 <script type="text/javascript"> <!- ...
- jquery中邮箱地址 URL网站地址正则验证实例代码
QQ网站有一个网站举报的功能,看了一些js代码觉得写得很不错,我就拿下来了,下面是一个email验证与url网址验证js代码,分享给大家 email地址验证 复制代码代码如下: function ch ...
- spark读取 kafka nginx网站日志消息 并写入HDFS中(转)
原文链接:spark读取 kafka nginx网站日志消息 并写入HDFS中 spark 版本为1.0 kafka 版本为0.8 首先来看看kafka的架构图 详细了解请参考官方 我这边有三台机器用 ...
- ecshop transport.js 和 jquery 冲突解决办法
您提供一个简单的解决transport.js 和 jquery 方法: 在 page_header.lbi 库文件中加入如下代码,注意操作顺序: 1.先导入transport.js 文件 {inse ...
- js和jquery中有关透明度操作的问题
在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置 透明度在IE浏览器 ...
随机推荐
- LightOj:1422-Halloween Costumes
传送门:http://www.lightoj.com/volume_showproblem.php?problem=1422 Halloween Costumes problem descriptio ...
- NO_PUBKEY
* 现象:$ sudo apt-get update时警告如下: W: GPG error: http://ppa.launchpad.net precise Release: The followi ...
- kettle-单表增量同步
目标:利于kettle实现单表增量同步,以时间为判断条件 背景:源表:db1.q1 (2w条数据) 目标表:db2.q2(0条数据) 表结构: CREATE TABLE `q1` ( `ID` bi ...
- python学习--Python之import与from...import的区别与用法
Python编码第一步是导入模块,有时候用import ***有时候用from...import,它们有什么区别呢,请看实例A/B: A: 1.当模块test.py中没有类,只有方法add,此方法实现 ...
- HDU——1013Digital Roots(九余数定理)
Digital Roots Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
- 刷题总结——跳蚤(poj1091容斥+分解质因数)
题目: Description Z城市居住着很多只跳蚤.在Z城市周六生活频道有一个娱乐节目.一只跳蚤将被请上一个高空钢丝的正中央.钢丝很长,可以看作是无限长.节目主持人会给该跳蚤发一张卡片.卡片上写有 ...
- [AHOI2008]逆序对(dp)
小可可和小卡卡想到Y岛上旅游,但是他们不知道Y岛有多远.好在,他们找到一本古老的书,上面是这样说的: 下面是N个正整数,每个都在1~K之间.如果有两个数A和B,A在B左边且A大于B,我们就称这两个数为 ...
- vue学习:解决Apycharm的 * is only available in ES6(use 'esversion: 6') 问题
使用pycharm打开main.js,代码前出现黄点,js报错了 把鼠标移至import的波浪线上,出现提示:W119 - ‘import’ is only available in ES6(use ...
- 加速和简化构建Docker(基于Google jib)
赵安家 2019年02月11日阅读 1518 关注 加速和简化构建Docker(基于Google jib) 介绍 其实jib刚发布时就有关注,但是一直没有用于生产,原因有二 基于 spotify/do ...
- luoguP1040 区间DP(记忆化 加分二叉树
dp[l][r]记录中序序列为l, l+1..r的最大加分值 root[l][r]记录这个序列的根节点 转移 i 为根节点 dp[l][r] = max(dp[l][i-1]*dp[l+1][r]+a ...