QQ在线状态检测 - 可自定义在线状态图片

<!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>
  <meta name="Author" content="小秦,XQin.cn">
  <meta name="Keywords" content="QQ在线状态检测">
  <meta name="Description" content="QQ在线状态检测 - 可自定义在线状态图片">
 <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://xqin.cn/QQOnline/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', [48080163, 276891949, 14944941, 1007051105]);
  setInterval(function(){//每隔10秒检测一次在线状态
   QQOnline.reload();
  }, 10000);
 //]]>
 </script>
 </body>
</html>

有话要说