今年的元宵節遇到情人節，挺不自量力的，呵呵，開篇給各位講個段子，早上一美女同學在空間發說說道：“開工大吉 起床啦，賣元宵，賣玫瑰，賣避孕套啦～有木有一起去發財的小伙伴？Let’s go…”，對於此種長相尚可然后又喜歡說調皮話的女生，博主不會放棄任何調侃機會，立馬評論道：“記得叫上我哦，賺的錢都歸你，然后賣不完的避孕套一起消滅掉，何如？”，沒一會兒，此同學找我聊天，各種問，畢業這幾年過得怎么樣？處對象木？……。只可惜，博主已有對象，過得還算湊合，最主要的博主雖然有時候講話喜歡帶點色彩，但骨子里是個十足的正經人。在此情人節之際，呼吁單身的園友們如若有喜歡的女神要大膽的表白，勇敢追尋自己的幸福，祝正在閱讀此文的你雙節日快樂！！！╮(╯3╰)╭
轉正題了哦！由於公司的在線保險業務越做越大，用戶量驟增，各種奇葩用戶，各種小白式操作，各種低智商……。此種情況下，有迫切需要在公司網站側邊欄加了一排QQ客服。
查了查資料，QQ客服有兩種表現形式，第一種是官方標准的，第二種是自定義的。
官方標准的是一段部署代碼，根據qq的在線狀態自動調用騰訊相關的圖標，比較簡單不做詳細介紹，參見地址：http://shang.qq.com/widget/consult.php
普通青年可以選擇官方標准的部署代碼，第二種是根據qq在線狀態調用自定義的圖片，so，想做文藝青年的請繼續跟着節奏，且聽我慢慢細說。先上個效果圖如下：
部署代碼操作步驟如下：
1) 申請代碼
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:271569542:43 &r=0.4220318759840679" alt="點擊這里給我發消息" title="點擊這里給我發消息"></a>
2) 定義online數組，必須是online命名
<script>var online= new Array();</script>
3) 獲取在線狀態
<script>var online= new Array();</script>
可以獲取多個，必須以冒號分隔，以冒號結尾，比如:
<script src="http://webpresence.qq.com/getonline?Type=1&271569542:78293657:123456:"></script>
online[0]=0,表示271569542離線
online[1]=1,表示78293657在線
online[2]=1,表示123456在線
填寫號碼的先后順序，分別對應數組online的0、1、2
4) 添加代碼
把src='http://wpa.qq.com/pa?p=1:80000805:1'替換為自己的圖片，比如:
<script>if(online[0]==0){document.write('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="http://xxxxx/outline.jpg" alt="點擊這里給我發消息" title="點擊這里給我發消息"></a>')}else{document.write('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="http://xxxxx/online.jpg" alt="點擊這里給我發消息" title="點擊這里給我發消息"></a>')} </script>
完整代碼示例如下（用到jquery和自定義圖片，需下載源碼文件然后替換自己的qq可演示）：
<!DOCTYPE html> <html> <head> <style type="text/css"> .flay {display: block;position: fixed;right:10px;width: 112px;height: 240px;overflow: hidden;z-index: 100000;padding:76px 0 0 17px;} </style> <script src="jquery-1.4.4.min.js"></script> <script type="text/javascript"> var online = new Array(); </script> <script src="http://webpresence.qq.com/getonline?Type=1&465358715:2546980218:2510876943:1349144603:"></script> </head> <body> <div id="flay" class="flay" > </div> </body> <script> if (online[0] == 0) { $("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=373810510&site=qq&menu=yes"><img border="0" src="q1_g.png" alt="點擊這里給我發消息" title="點擊這里給我發消息"></a>') } else { $("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=373810510&site=qq&menu=yes"><img border="0" src="q1.png" alt="點擊這里給我發消息" title="點擊這里給我發消息"></a>') } if (online[1] == 0) { $("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="q2_g.png" alt="點擊這里給我發消息" title="點擊這里給我發消息"></a>') } else { $("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="q2.png" alt="點擊這里給我發消息" title="點擊這里給我發消息"></a>') } if (online[2] == 0) { $("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="q3_g.png" alt="點擊這里給我發消息" title="點擊這里給我發消息"></a>') } else { $("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="q3.png" alt="點擊這里給我發消息" title="點擊這里給我發消息"></a>') } if (online[3] == 0) { $("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="q4_g.png" alt="點擊這里給我發消息" title="點擊這里給我發消息"></a>') } else { $("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="q4.png" alt="點擊這里給我發消息" title="點擊這里給我發消息"></a>') } </script> </html>
如果您覺得此文對你有用，不要吝嗇右邊的推薦哦，大家的支持是我分享智慧的動力，同時歡迎朋友們和我微博互動交流:-)
正在看本人博客的這位童鞋，我看你氣度不凡，談吐間隱隱有王者之氣，日后必有一番作為！旁邊有“推薦”二字，你就順手把它點了吧，相得准，我分文不收；相不准，你也好回來找我！