<!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在线聊天挂件的相关教程结束。
