自定义QQ在线状态图片

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>QQ在线客服状态检测,自定义在线状态图片</title>
	<style type="text/css" media="screen">
		.QQPanel { list-style: none; }
		.QQPanel li { float: left; margin-right: 10px; }
		.QQPanel a { display: block; height: 34px; width: 34px; background: url('//ku.shouce.ren/files/images/201601/56a0eecf0a8cd.gif') no-repeat; }
		/* QQ不在线(默认)状态CSS */
		.QQPanel a.qq2 { background-position: -35px 0; }
		.QQPanel a.qq3 { background-position: -69px 0; }
		.QQPanel a.qq4 { background-position: -103px 0; }
		/* QQ在线状态CSS */
		.QQPanel .online a.qq1 { background-position: 0 -34px; }
		.QQPanel .online a.qq2 { background-position: -35px -34px; }
		.QQPanel .online a.qq3 { background-position: -69px -34px; }
		.QQPanel .online a.qq4 { background-position: -103px -35px; }
		/* QQ在线状态鼠标移入时CSS */
		.QQPanel .online a.qq1:hover { background-position: 0 bottom; }
		.QQPanel .online a.qq2:hover { background-position: -35px bottom; }
		.QQPanel .online a.qq3:hover { background-position: -69px bottom; }
		.QQPanel .online a.qq4:hover { background-position: -103px bottom; }
	</style>
 </head>
 <body>
	<ul class="QQPanel" id="QQPanel"><li><a href="#" class="qq1"></a></li><li><a href="#" class="qq2"></a></li><li><a href="#" class="qq3"></a></li><li><a href="#" class="qq4"></a></li></ul>
	<script type="text/javascript">
	//<![CDATA[
		var online = [];
		function QQPanel(id, data){
			if((this.id = this.get(id)) == null)return false;
			this.url = 'http://webpresence.qq.com/getonline?Type=1&';
			this.header = document.getElementsByTagName('head');
			this.items = this.id.childNodes;
			this.lens  = this.items.length;
			this.index = 0;
			this.data  = data;
			this.start();
		}
		QQPanel.prototype = {
			get: function(id){return document.getElementById(id);},
			start: function(){
				if(this.index >= this.lens)return this.running=false;
				this.running = true;
				var script  = document.createElement('script');
				script.type = 'text/javascript';
				script.src  = this.url + this.data[this.index] +':&'+(+new Date());
				this.header[0].appendChild(script);
				script.onload = script.onreadystatechange = (function(script){
					var _this = this;
					return (function(){
						if(script.readyState){
							if(script.readyState.match(/loaded|complete/i)){
								_this.show(script)
								_this = script = null;
							}
						}else{
							_this.show()
							_this = script = null;
						}
					});
				}).call(this, script);
			},
			show: function(s){
				this.items[this.index].className = '';
				this.items[this.index].title = '我不在线,有事请留言.';
				if(online[0] == 1){
					this.items[this.index].className = 'online';
					this.items[this.index].title = '我在线,有事您招呼.';
				}
				this.items[this.index].firstChild.href = 'tencent://message/?uin='+this.data[this.index++]+'&Site=小秦制作&Menu=yes';
				this.start();
			},
			reload: function(){
				if(this.running)return false;
				this.index = 0;
				this.start();
			}
		}
		var QQOnline = new QQPanel('QQPanel', [48080163, 276891949, 14944941, 1007051105]);
		setInterval(function(){//每隔10秒检测一次在线状态
			QQOnline.reload();
		}, 10000);
	//]]>
	</script>
 </body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

自定义QQ在线状态图片

分类

广告代码

描述

QQ在线客服状态检测,自定义在线状态图片，可设置不同的QQ号码，号码专一存放在数组里，可以设置无限多个。不过太我的话检测起来就会费时间，甚至为造成网页假死哦。