js 仿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=gb2312" />
<title>可以自动弹出信息的在线客服代码</title>
</head>

<body style="text-align:center">
<script type=text/网页特效>kfguin="123456789";ws=""; companyname="111cn.net"; welcomeword="您好,欢迎光临<brt>请问,有什么可以帮到您的吗?"; type="1";</script>
<script src="js/kf.js" type=text/javascript></script>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>功能：可随滚动条滚动，可移动窗口，n秒后可自动弹出信息。</p>
<p>使用方法：</p>
<p>1 kfguin=&quot;替换qq号码&quot;;ws=&quot;<a href="http://www.111cn.net">www.111cn.net</a>&quot;; companyname=&quot;&quot;;</p>
<p>2 如需修改弹出时间kf.js下的 window.settimeout(&quot;kf_sleeps教程how()&quot;,2000); 换算单位为2000即等于2秒</p>
<p>&nbsp;</p></p>
<p></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

kf.js文件代码如下

var online= new array();
var urlroot = "images/";
var tout = -1;
var drag = false;
var g_safenode = null;
lastscrolly = 0;
var kfguin;
var ws;
var companyname;
var welcomeword;
var type;

if(kfguin)
{
  rightdivhtml = '<div id="rightdiv" style="position:absolute; top:160px; right:1px;">';

  rightdivhtml += kf_getpopuprightdivhtml(kfguin,ws);
 
  rightdivhtml += '</div>';
 
  document.write(rightdivhtml);
 
  if(type==1 && kf_getcookie('hasshown')==0)
  {
     companyname = companyname.substr(0,15);      
      welcomeword = kf_processwelcomeword(welcomeword);
    
     kfguin = kf_getsafehtml(kfguin);
     companyname = kf_getsafehtml(companyname);
    
     welcomeword = welcomeword.replace(/<brt>/g,'rn');
     welcomeword = kf_getsafehtml(welcomeword);
     welcomeword = welcomeword.replace(/r/g, "").replace(/n/g, "<br>");
 
      window.settimeout("kf_sleepshow()",2000);
      //kf_sleepshow();
  }
  window.settimeout("kf_movewithscroll()",1);
  //window.setinterval("wpa_count()",10000);
}

function kf_getsafehtml(s)
{
 var html = "";
 var safenode = g_safenode;
 
 if(!safenode)
 {
  safenode = document.createelement("textarea");
 }

 if(safenode)
 {
  safenode.innertext = s;
  html = safenode.innerhtml;
  safenode.innertext = "";
  
  g_safenode = safenode;
 }
 
 return html;
}

function kf_movewithscroll()
{
  if(typeof window.pageyoffset != 'undefined') {
        nowy = window.pageyoffset;
     }
     else if(typeof document.compatmode != 'undefined' && document.compatmode != 'backcompat') {
        nowy = document.documentelement.scrolltop;
     }
     else if(typeof document.body != 'undefined') {
        nowy = document.body.scrolltop;
     } 

  percent = .1*(nowy - lastscrolly);
  if(percent > 0)
  {
   percent=math.ceil(percent);
  }
  else
  {
   percent=math.floor(percent);
  }

  document.getelementbyid("rightdiv").style.top = parseint(document.getelementbyid("rightdiv").style.top) + percent+"px";
  if(document.getelementbyid("kfpopupdiv"))
  {
   document.getelementbyid("kfpopupdiv").style.top = parseint(document.getelementbyid("kfpopupdiv").style.top) + percent+"px";
  }
  lastscrolly = lastscrolly + percent;
  tout = window.settimeout("kf_movewithscroll()",1);
}

function kf_hide()
{
 if(tout!=-1)
 {
  cleartimeout(tout);  
  tout=-1;
 }
 document.getelementbyid("rightdiv").style.visibility = "hidden";
}

function kf_hidekfpopup()
{
 if(tout!=-1)
 {
  cleartimeout(tout);  
  tout=-1;
 }
 document.getelementbyid("kfpopupdiv").style.visibility = "hidden";
 tout=window.settimeout("kf_movewithscroll()",1);
}

function kf_getpopupdivhtml(kfguin,reference,companyname,welcomeword)
{
  var temp = '';
   temp += '<div style="float: left;height: 150px;width: 8px;background-image: url('+urlroot+'bg_1.gif);"></div>';
    temp += '<div style="font-family: tahoma;text-align:left;float: left;height: 150px;width: 324px;background-image: url('+urlroot+'bg_2.gif);background-repeat: repeat-x;">';
    temp += '<div><h1 style=" float:left;font-size: 14px;color: #ffffff;margin: 0px;padding: 10px 0 13px 2px;line-height:17px;">'+companyname+'</h1><a href="#" onclick="kf_hidekfpopup();return false;" style="background-image: url('+urlroot+'close.gif);float: right;height: 19px;width: 42px;" onmouseo教程ver="javascript:this.style.backgroundposition='bottom'" onmouseleave="javascript:this.style.backgroundposition='top'"></a></div>';
    temp += '<div style="height:83px;padding: 0 0 0 2px;clear:both;">';
    temp += '<div style="background-image: url('+urlroot+'face.jpg);height: 70px;width: 70px;float:left;"></div>';
    temp += '<p style="font-family:tahoma;font-size:12px;line-height:24px;width: 240px;margin:0px;padding: 0 0 0 12px;display:block;float:left;margin-top:2px;word-wrap:break-word;">'+welcomeword+'</p></div>';
    temp += '<div style="clear: both;">';
    temp += '<a onclick="kf_hidekfpopup();return false;" href="#" style="float:right;background-image: url('+urlroot+'btn_1.gif);margin: 0 0 0 5px;padding: 0px;border:0px;height: 21px;width: 69px;"></a>';
    temp += '<a onclick="kf_openchatwindow(1)" href="#" style="float:right;background-image: url('+urlroot+'btn_2.gif);margin: 0px;padding: 0px;border:0px;height: 21px;width: 69px;"></a></div>';
    temp += '</div><div style="float: left;height: 150px;width: 8px;background-image: url('+urlroot+'bg_1.gif);background-position: right;"></div>';

    return temp;
}

function kf_getpopuprightdivhtml(kfguin,reference)
{ 
 var temp = "";

 temp += '<div class="wpa_popup" style="width:90px; height:150px;">';
  temp += '<div style="width:8px; height:150px; float:left; background:url('+urlroot+'bg_1.gif);"></div>';
  temp += '<div style="float:left; width:74px; height:150px; background:url('+urlroot+'middle.jpg); background-position: center;">';
  temp += '<div ><h1 style="line-height:17px; font-size:14px; color:#fff; margin:0px; padding:10px 0 13px 8px;">&nbsp;</h1></div>';
  temp += '<div style="height:83px; padding:0 0 0 2px; clear:both;"><div style="width:70px; height:70px; float:left; background:url('+urlroot+'face.jpg);"></div></div>';
  temp += '<div style="clear:both;"><a href="#" onclick="kf_openchatwindow(0)" style="width:69px; height:21px; background:url('+urlroot+'btn_2.gif); margin:0 0 0 2px; display:block;"></a></div></div>';
  temp += '<div style="width:8px; height:150px; float:left; background:url('+urlroot+'bg_1.gif) right;"></div></div>';

  return temp;
}

//added by simon 2008-11-04
function kf_openchatwindow(flag)
{
 window.open('http://bizapp.qq.com/webc.htm?new=0&amp;sid='+kfguin+'&amp;o=&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');
 if(flag==1)
 {
  kf_hidekfpopup();
 }
 return false;
}
//added by simon 2008-11-04 end

function kf_validatewelcomeword(word)
{
 var count = 0;
 
 for(var i=0;i<word.length;i++)
 {
  if(word.charat(i)=='n')
  {
   count++;
  }
  if(count>2)
  {
    return 2;
  }
 }
 if(word.length > 57+2*count)
 {
  return 1;
 }
 
 count = 0;
  var temp = word.indexof('n');
  while(temp!=-1)
  {
   word = word.substr(temp+1);
   if(temp-1<=19)
   {
    count += 19;
   }
   else if(temp-1<=38)
   {
    count += 38;
   }
   else if(temp-1<=57)
   {
    count += 57;
   }
   
   temp = word.indexof('n');
  }
  count+=word.length; 
  if(count>57)
  {
   return 3;
  }
 
  return 0;
}

function kf_processwelcomeword(word)
{
 word = word.substr(0,57+10);
 var result = '';
 var count = 0; 
 var temp = word.indexof('<brt>');
 
  while(count<57 && temp!=-1)
  {

   if(temp<=19)
   {
    count += 19;
    if(count<=57)
    {
       result += word.substr(0,temp+5);
     }
     else
     {
       result += word.substr(0,57-count>word.length?word.length:57-count);
     }
   }
   else if(temp<=38)
   {
    count += 38;
    if(count<=57)
    {
       result += word.substr(0,temp+5);
     }
     else
     {
       result += word.substr(0,57-count>word.length?word.length:57-count);
     }
   }
   else if(temp<=57)
   {
    count += 57;
    if(count<=57)
    {
       result += word.substr(0,temp+5);
     }
     else
     {
       result += word.substr(0,57-count>word.length?word.length:57-count);
     }
   }
   
   word = word.substr(temp+5);
   temp = word.indexof('<brt>');
  }
 
  if(count<57)
  {
      result += word.substr(0,57-count>word.length?word.length:57-count);
  }
 
  return result;
}

function kf_setcookie(name, value, exp, path, domain)
{
 var nv = name + "=" + escape(value) + ";";

 var d = null;
 if(typeof(exp) == "object")
 {
  d = exp;
 }
 else if(typeof(exp) == "number")
 {
  d = new date();
  d = new date(d.getfullyear(), d.getmonth(), d.getdate(), d.gethours(), d.getminutes() + exp, d.getseconds(), d.getmilliseconds());
 }
 
 if(d)
 {
  nv += "expires=" + d.togmtstring() + ";";
 }
 
 if(!path)
 {
  nv += "path=/;";
 }
 else if(typeof(path) == "string" && path != "")
 {
  nv += "path=" + path + ";";
 }

 if(!domain && typeof(vs_cookiedm) != "undefined")
 {
  domain = vs_cookiedm;
 }
 
 if(typeof(domain) == "string" && domain != "")
 {
  nv += "domain=" + domain + ";";
 }

 document.cookie = nv;
}

function kf_getcookie(name)
{
 var value = "";
 var cookies = document.cookie.split("; ");
 var nv;
 var i;

 for(i = 0; i < cookies.length; i++)
 {
  nv = cookies[i].split("=");

  if(nv && nv.length >= 2 && name == kf_rtrim(kf_ltrim(nv[0])))
  {
   value = unescape(nv[1]);
  }
 }

 return value;
}

function kf_sleepshow()  
{  
 kf_setcookie('hasshown', 1, '', '/', 'bizapp.qq.com');
 
 var position = parseint(document.getelementbyid("rightdiv").style.top) + 170;
 popupdivhtml = '<div id="kfpopupdiv" onmousedown="mymove.move('kfpopupdiv',event,1);"  style="z-index:10000;filter:alpha(opacity=90);position: absolute; top: '+position+'px; right: 500px;color:#000;font-size: 12px;cursor:move;height: 150px;width: 340px;">';
  popupdivhtml += kf_getpopupdivhtml(kfguin,ws,companyname,welcomeword);
  popupdivhtml += '</div>';
  document.body.insertadjacenthtml("beforeend",popupdivhtml);
}

function kf_dealerrors()
{
 kf_hide();
 return true;
}

function kf_ltrim(str)
{
  while (str.charat(0) == " ")
  {
    str = str.slice(1);
  }
  return str;
}

function kf_rtrim(str)
{
  var ilength = str.length;
  while (str.charat(ilength - 1) == " ")
  {
    str = str.slice(0, ilength - 1);
 ilength--;
  }
  return str;
}

window.onerror = kf_dealerrors;
var mymove = new tong_movediv();  

function tong_movediv()
{
    this.move=function(id,evt,t)
    {   
     if(id == "")
  {
   return;
  }
     var o = document.getelementbyid(id);   
     if(!o)
  {
   return;
  }   
      evt = evt ? evt : window.event;   
      o.style.position = "absolute";   
      o.style.zindex = 200;   
      var obj = evt.srcelement ? evt.srcelement : evt.target;  
      var w = o.offsetwidth;     
      var h = o.offsetheight;     
      var l = o.offsetleft;     
      var t = o.offsettop; 
      var div = document.createelement("div"); 
      document.body.appendchild(div);  
      div.style.css教程text = "filter:alpha(opacity=10,style=0);opacity:0.2;width:"+w+"px;height:"+h+"px;top:"+t+"px;left:"+l+"px;position:absolute;background:#000";     
      div.setattribute("id", id +"temp");   
      this.move_onlymove(id,evt,t);
  } 
  
  this.move_onlymove = function(id,evt,t)
  {   
     var o = document.getelementbyid(id+"temp");   
     if(!o)
    {
   return;
    }  
     evt = evt?evt:window.event;
     var relleft = evt.clientx - o.offsetleft;
     var reltop = evt.clienty - o.offsettop;   
     if(!window.captureevents)   
     {     
       o.setcapture();          
     }  
     else  
     {    
       window.captureevents(event.mousemove|event.mouseup);     
     }      
         
       document.onmousemove = function(e)
       {
             if(!o)
             {
                 return;
             }
             e = e ? e : window.event;
 
          var bh = math.max(document.body.scrollheight,document.body.clientheight,document.body.offsetheight,
               document.documentelement.scrollheight,document.documentelement.clientheight,document.documentelement.offsetheight);
          var bw = math.max(document.body.scrollwidth,document.body.clientwidth,document.body.offsetwidth,
               document.documentelement.scrollwidth,document.documentelement.clientwidth,document.documentelement.offsetwidth);
          var sbw = 0;
          if(document.body.scrollwidth < bw)
           sbw = document.body.scrollwidth;
          if(document.body.clientwidth < bw && sbw < document.body.clientwidth)
           sbw = document.body.clientwidth;
          if(document.body.offsetwidth < bw && sbw < document.body.offsetwidth)
           sbw = document.body.offsetwidth;
          if(document.documentelement.scrollwidth < bw && sbw < document.documentelement.scrollwidth)
           sbw = document.documentelement.scrollwidth;
          if(document.documentelement.clientwidth < bw && sbw < document.documentelement.clientwidth)
           sbw = document.documentelement.clientwidth;
          if(document.documentelement.offsetwidth < bw && sbw < document.documentelement.offsetwidth)
           sbw = document.documentelement.offsetwidth;
             
             if(e.clientx - relleft <= 0)
             {
                 o.style.left = 0 +"px";
             }
             else if(e.clientx - relleft >= bw - o.offsetwidth - 2)
             {
                 o.style.left = (sbw - o.offsetwidth - 2) +"px";
             }
             else
             {
                 o.style.left = e.clientx - relleft +"px";
             }
             if(e.clienty - reltop <= 1)
             {
                 o.style.top = 1 +"px";
             }
             else if(e.clienty - reltop >= bh - o.offsetheight - 30)
             {
                 o.style.top = (bh - o.offsetheight) +"px";
             }
             else
             {
                 o.style.top = e.clienty - reltop +"px";
             }
       }
     
     document.onmouseup = function()     
     {      
          if(!o) return;      
           
          if(!window.captureevents)
      {
         o.releasecapture(); 
      }                        
          else 
      {
         window.releaseevents(event.mousemove|event.mouseup);
      }    
                  
          var o1 = document.getelementbyid(id);      
          if(!o1)
      {
         return;
      }                  
          var l0 = o.offsetleft;      
          var t0 = o.offsettop;      
          var l = o1.offsetleft;      
          var t = o1.offsettop;  
         
          //alert(l0 + " " +  t0 +" "+ l +" "+t);    
         
          mymove.move_e(id, l0 , t0, l, t,t);      
          document.body.removechild(o);      
          o = null;     
   } 
  } 
  
  
  this.move_e = function(id, l0 , t0, l, t,t)    
  {     
       if(typeof(window["ct"+ id]) != "undefined")
   {
      cleartimeout(window["ct"+ id]);  
   }
      
       var o = document.getelementbyid(id);     
       if(!o) return;     
       var sl = st = 8;     
       var s_l = math.abs(l0 - l);     
       var s_t = math.abs(t0 - t);     
       if(s_l - s_t > 0) 
   {
    if(s_t)
    {
     sl = math.round(s_l / s_t) > 8 ? 8 : math.round(s_l / s_t) * 6;
    }      
              
           else
    {
     sl = 0;
    }                   
   }                 
       else
   {
    if(s_l)
    {
     st = math.round(s_t / s_l) > 8 ? 8 : math.round(s_t / s_l) * 6;  
    }                     
           else 
       {
          st = 0;
       }                 
   }      
                        
       if(l0 - l < 0)
   {
    sl *= -1;
   }             
       if(t0 - t < 0)
   {
    st *= -1;
   }              
       if(math.abs(l + sl - l0) < 52 && sl)
   {
        sl = sl > 0 ? 2 : -2;      
   }   
       if(math.abs(t + st - t0) < 52 && st)
   {
          st = st > 0 ? 2 : -2;       
   }     
       if(math.abs(l + sl - l0) < 16 && sl)
   {
        sl = sl > 0 ? 1 : -1;       
   }  
       if(math.abs(t + st - t0) < 16 && st)
   {
        st = st > 0 ? 1 : -1;         
   }
       if(s_l == 0 && s_t == 0)
   {
           return;       
   }
       if(t)     
       {   
        o.style.left = l0 +"px";   
        o.style.top = t0 +"px";   
        return;     
       }     
       else     
       {   
        if(math.abs(l + sl - l0) < 2)
    {
     o.style.left = l0 +"px"; 
    }               
        else    
    {
     o.style.left = l + sl +"px";  
    }          
        if(math.abs(t + st - t0) < 2)
    {
     o.style.top = t0 +"px";  
    }                
        else   
    {
     o.style.top = t + st +"px";  
    }
                         
        window["ct"+ id] = window.settimeout("mymove.move_e('"+ id +"', "+ l0 +" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +","+t+")", 1);     
       }    
   }  
} 
function wpa_count()
{
    var body = document.getelementsbytagname('body').item(0);
    var img = document.createelement('img');
 var now = new date();
    img.src = "http://bizapp.qq.com/cgi/wpac?kfguin=" + kfguin + "&ext=0" + "&time=" + now.gettime() + "ip=172.23.30.15&";
    img.style.display = "none";
    body.appendchild(img);
}

 

源码下载地址:

http://down.111cn.net/down/code/js/zaixiankefu/2011/0306/22843.html

效果预览地址:

http://upload.111cn.net/110306/tipkf/

时间： 2024-09-01 00:52:04

js 仿qq客服源代码的相关文章

JS实现从顶部下拉显示的带动画QQ客服特效代码_javascript技巧

本文实例讲述了JS实现从顶部下拉显示的带动画QQ客服特效代码.分享给大家供大家参考,具体如下: 这是一款动画版QQ在线客服代码,从网页顶部下拉出来的QQ客服,下滑结束后有弹性缓冲效果.在世界地图的映衬下,似乎一下子上升了品位.动画效果是由jq实现的,QQ客服的一些信息自己修改下,换成你自己的QQ,上传到网页就可用啦.注:在火狐台chrome浏览器中测试效果会更好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-show-down-

js QQ客服悬浮效果实现代码

 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

js 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="Cont

jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码_jquery

本文实例讲述了jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码.分享给大家供大家参考,具体如下: 这是一个黑色的QQ客服代码,显示在网页右侧,点击后会向左展开QQ客服的完整内容,适用的网站范围广,以前发过不少的在线客服,每一款都风格不同,你可以在网页特效栏目搜索"在线客服"看下有你需要的不. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-show-qq-online-kf-codes/ 具体代码如

javascript悬浮在线QQ客服代码分享

效果代码 js代码  代码如下 复制代码 <!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

网页-网站中如何嵌入QQ客服

问题描述 网站中如何嵌入QQ客服 网页中嵌入多个QQ客服.当点击一个QQ客服头像时,判断本地是否安装了QQ,若安装QQ软件的话,调用本地的QQ进行聊天,若没有安装QQ软件,则弹出网页QQ对话框进行聊天.该如何实现?跪求大神指导. 解决方案 参考:http://www.newhua.com/2010/0511/92193.shtmlhttp://download.csdn.net/detail/leihongxi/3115960http://download.csdn.net/download/s

代码-网页QQ客服悬浮窗的安装方法，怎么操作

问题描述 网页QQ客服悬浮窗的安装方法,怎么操作 如题,网页QQ客服悬浮窗的安装方法步骤是什么谁能告诉我,谢谢 解决方案 http://blog.csdn.net/yangyuankp/article/details/7840784 解决方案二: http://www.codefans.net/jscss/code/2674.shtml 解决方案三: css position fixedhttp://www.w3school.com.cn/cssref/pr_class_position.asp

利用javascript实现QQ客服代码

经常会在一些网站上看到QQ客服效果,当客服人员在线的时候,网页上的QQ显示为在线状态,不在线的时候,网页上的QQ显示下线状态,这是通过javascript来实现的. <script language=javascript> function picsize(obj,MaxWidth){   img=new Image();//新建一个Image对象,用这个对象的width就不会出现width为0的现象   img.src="/fk/blog/obj.src";   if (

asp js QQ客服代码

<% if webbanner<>"" then qq=split(webbanner,",") for n=0 to ubound(qq) myqq=myqq+qq(n)+":" next %> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312&quo