<!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>javascript版QQ在线聊天</title>
<script language="JavaScript" type="text/javascript">
    var online=[];//定义返回数组结果,不可删
    //所有QQ号码,ps:QQ号码需要在:http://shang.qq.com/widget/set.php登陆开通服务。否则不行。
    var arr=['2604442887','2051745288','1848770385','1120133673','2803313065','2648742550','2094800395','2094513153','2669768587','2654708197','2806803604','2103969859','1774028571','2037063540','2094733504','2327791804','1253815649','2230046791','2103770755','1304620374','2093786904','2849914876','2857556863','2102872570','2813748275','2665689096','2104447022','2843331729','1158460366','1803024257','2568724744','2591950281','2655743296','2103288748','2545706138','2376968019','2105851980','2094285843','2016877549','2094655602','2103184634','1843771362','2328299466','2640794841','2058114350','2050633405','2258529381','2057854571','2093960197','2665560453','1989981124','1602153264','1514350293','402074938','363163864'];
    var my_arr=arr.join(":")+':';
    var qq_url='http://webpresence.qq.com/getonline?Type=1&'+my_arr;
  /****************动态创建JS*********************/
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = qq_url;
  head.appendChild(script);
  /***********判断JS文件是否加载完成************/
  function complete_load(js){
    if ((navigator.userAgent.indexOf('MSIE') == -1) ? false: true) {
      js.onreadystatechange = function() {
        if (this.readyState && this.readyState == "loading") return;
        else creatHtml();
      };
    } else js.onload = function() {
      creatHtml();
    };
    js.onerror = function(){
      alert('加载错误。请检查文件路径是否正确!')
    };
  }
  complete_load(script);
  /*删除数组索引方法*/
  Array.prototype.remove=function(dx)
  {
      if(isNaN(dx)||dx>this.length){return false;}
      for(var i=0,n=0;i<this.length;i++)
      {
        if(this[i]!=this[dx])
        {
          this[n++]=this[i]
        }
      }
    this.length-=1
  }
  /*返回在线QQ*/
  function getOnlineQq(arr){
    var online_qq = new Array();
    online_qq['online'] =[]
    online_qq['offline'] = [];
    for(var i=0;i<online.length;i++){
      if(online[i]==1){
        online_qq['online'].push(arr[i]);
      }else{
        online_qq['offline'].push(arr[i]);
      }
    }
    if(online_qq['online'].length>=10){
      online_qq['offline']=[];
      online_qq['online'] = getRandQq(online['online'],10);
    }else{
      var olength = 10- online_qq['online'].length;
      online_qq['offline'] = getRandQq(online_qq['offline'],olength);
    }
    return online_qq;
  }
  /*动态生成在线QQ*/
  function creatHtml(){
    var online_qq = getOnlineQq(arr);
    var qq_kefu = '<ul>';
    for(var i=0;i<online_qq['online'].length;i++){
      qq_kefu += '<li><em><img alt="" src="http://www.chinaskin.cn/themes/chinaskin/images/2013/tel_pic/qq1.png" /></em><a href="http://wpa.qq.com/msgrd?v=3&uin='+online_qq['online'][i]+'&site=qq&menu=yes" title="立即咨询" target="_blank">'+online_qq['online'][i]+'</a></li>';
    }
    for(var i=0;i<online_qq['offline'].length;i++){
      qq_kefu += '<li><em><img alt="" src="http://www.chinaskin.cn/themes/chinaskin/images/2013/tel_pic/qq2.png" /></em><a href="http://wpa.qq.com/msgrd?v=3&uin='+online_qq['offline'][i]+'&site=qq&menu=yes" title="立即咨询" target="_blank">'+online_qq['offline'][i]+'</a></li>';
    }
     qq_kefu += '</ul>';
      document.getElementById('webqq').innerHTML = qq_kefu;
  }

  //返回num个arr元素
  function getRandQq(arr,num){
    var narr = [];
    var index = 0;
    var sarr = arr;
    if(arr.length<=num){
      return arr;
    }else{
      for(i=0;i<num;i++){
        index = Math.round(Math.random() * (arr.length-1));
        narr.push(arr[index]);
        arr.remove(index);
      }
      return narr;
    }
  }
</script>
</head>
<body>
<!--webQQ[-->
<style type="text/css">
  img{ border:none;}
  *{ list-style:none; padding:0; margin:0;}
  a{ text-decoration: none;}
  .qqclear:after,.qqclear:before{content:""; display:table;}
  .qqclear:after{ clear:both;}
  .qqclear{*zoom:1;}
  .webqq{width:156px; height:405px;padding-left: 16px;padding-top: 39px; background:url(http://www.chinaskin.cn/themes/chinaskin/images/2013/tel_pic/qq_bg.gif) no-repeat; position: fixed; top:130px; right:0; z-index:99999;_position: absolute;_top: expression(documentElement.scrollTop+150);}
  .webqq li{ width:145px; height:39px; overflow:hidden; background:url(http://www.chinaskin.cn/themes/chinaskin/images/2013/tel_pic/no_hover.jpg) no-repeat; position:relative; zoom:1;}
  .webqq li:hover{ background: url(http://www.chinaskin.cn/themes/chinaskin/images/2013/tel_pic/hover.jpg) no-repeat; cursor:pointer;}
  .webqq li em{ position:absolute; display:block; width:24px; height:27px; left:5px; top:5px;}
  .webqq li a{ display:block; line-height: 58px; height: 39px; text-indent: 40px; color:#f00;}
</style>
<div class="webqq" id="webqq">
</div>
<!--]end webQQ-->
<div style="font-size:14px;">
  ps:生成随机十个在线的QQ。每次刷新重新随机排序一次。。
</div>
</body>
</html>

javascript版QQ在线聊天挂件的更多相关文章

  1. 微信公众平台中添加qq在线聊天代码

    微信公众平台是个不错的媒体,可以和你的小伙伴们即时交流,但你的小伙伴们是用手机上的微信,打字自然就慢了:有人说用微信网页版,那个也不习惯,再说也不一定所有人都知道网页版微信.(2014.01.22更新 ...

  2. QQ在线聊天代码获取和使用教程

    在网站上挂上悬浮QQ是一种有效的推广方式,QQ正常情况下是不被允许临时会话的,需要加为好友才可以,这样很不友好, 当今每个行业都是有很多人在做,竞争很激烈,对客户的友好是增加订单的有效途径. 地址:h ...

  3. PC端页面如何调用QQ进行在线聊天?

    pc端如何实现QQ在线咨询? html代码如下: <a href="tencent://message/?uin=1234567&Site=Sambow&Menu=ye ...

  4. Web版的各种聊天工具

    直到近期为止,我们经常使用的即时聊天工具(QQ.msn等)了Web版,大家不用下载庞大软件,直接打开网页就能够与自己的好友聊天,非常方便.在此将时汇总        便于大家查找        节约大 ...

  5. 网页中插入QQ在线功能

    网页中插入QQ在线功能 本随笔记录的是网页中如何插入qq在线聊天,这里讲解的是 普通QQ在线聊天操作. 例:第一种方式  使用 tencent://message/?uin=QQ号码&Site ...

  6. 在线聊天室的实现(1)--websocket协议和javascript版的api

    前言: 大家刚学socket编程的时候, 往往以聊天室作为学习DEMO, 实现简单且上手容易. 该Demo被不同语言实现和演绎, 网上相关资料亦不胜枚举. 以至于很多技术书籍在讲解网络相关的编程时, ...

  7. java版的类似飞秋的局域网在线聊天项目

    原文链接:http://www.cnblogs.com/wangleiblog/articles/5323305.html 转载请注明 最近在弄一个java版的局域网在线聊天项目,功能跟飞秋差不多.p ...

  8. 手机web页面调用手机QQ实现在线聊天的效果

    html代码如下: <a href="javascript:;" onclick="chatQQ()">QQ咨询</a> js代码如下: ...

  9. java在线聊天项目1.3版 ——设计好友列表框功能

    设计好友列表框功能,思路—— 1.当客户端成功登陆后,则客户端把成功登陆信息发送给服务端, 2.由服务端将接收到来自各个成功登陆的客户端的用户信息添加进好友列表, 3.每当有成功登陆的用户就向各个客户 ...

随机推荐

  1. 转:Linux内存管理之mmap详解

    一. mmap系统调用 1. mmap系统调用 mmap将一个文件或者其它对象映射进内存.文件被映射到多个页上,如果文件的大小不是所有页的大小之和,最后一个页不被使用的空间将会清零.munmap执行相 ...

  2. hdu 4541 Ten Googol

    http://acm.hdu.edu.cn/showproblem.php?pid=4541 打表找规律 #include <cstdio> #include <cstring> ...

  3. C/C++跨平台的的预编译宏

    我们在编译一些跨平台的程序的时候难免会遇到_WIN32  __linux__什么之类的SDK或者编译器环境预定义的宏.有很多,之前还分不清_WIN32 和WIN32的区别.不过这里还好有个列表,做个备 ...

  4. javascript 误用this指针 的情况

    理解了this指针后,我们再来看看一些很容易误用this指针的情况. 示例1——内联式绑定Dom元素的事件处理函数 <script type="text/javascript" ...

  5. 为什么 HTTP 有时候比 HTTPS 好?

    做为一家安全公司,我们在站点Stormpath上经常被开发者问到的是有关安全方面最优做法的问题.其中一个被经常问到的问题是: 我是否应当在站点上运行HTTPS? 很不幸,查遍整个因特网,你大多数情况下 ...

  6. 迭代导出word 文档

    Map迭代的使用: Map map = new HashMap() ; Iterator it = map.entrySet().iterator() ; while (it.hasNext()) { ...

  7. css中margin:0 auto没作用

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...

  8. github atom创建自己的语法高亮

    使用atom一段时间了,有些插件还不是很成熟.比如项目中使用protobuf,早就有人写了语法高亮(https://github.com/podgib/atom-protobuf),但是效果不是很好. ...

  9. 【顽固BUG】Visual Studio 2013 + TestDriven.NET-3.8.2860_Personal_Beta 调用的目标发生了异常。

    前言 突然怎么弄也无法断点调试了 输出如下: ------ Test started: Assembly: Server5.V2.dll ------ 调用的目标发生了异常. 而且网站运行提示: -- ...

  10. Using HttpClient properly to avoid CLOSE_WAIT TCP connections

    Apache的HttpComponent组件,用的人不在少数.但是能用好的人,却微乎其微,为什么?很简单,TCP里面的细节实现不是每个人都能捕获到的(细节是魔鬼),像并发请求控制&资源释放,N ...