QQ在线状态自定义图片,通过js设置多个号码

发布时间：2018-08-31 01:45:29 所属栏目：Asp教程来源：站长网

导读：QQ在线客服状态检测,自定义在线状态图片，可设置不同的QQ号码，号码专一存放在数组里，可以设置无限多个。不过太我的话检测起来就会费时间，甚至为造成网页假死哦。为解决一些网页特效运行后不能显示效果（例如： jQuery 则需要刷新）问题，烈火特别新增

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

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<!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=gbk" /> <title>QQ在线客服状态检测,自定义在线状态图片 - liehuo.net</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('http://www.veryhuo.com/uploads/allimg/1007/qqstatus.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', [32619959, 1234567, 7654321, 1122334455]); setInterval(function(){//每隔10秒检测一次在线状态 QQOnline.reload(); }, 10000); //]]> </script> </body> </html> <div style="display:none;"> <script type="text/javascript" src="/liehuo.net/js/stat.js"></script> </div><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：黄山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!