用AJAX写的聊天室（和淘宝上的阿里巴巴很像的工具条）
日期：2014-05-16 浏览次数：20789 次
用AJAX写的聊天室（和淘宝下的阿里巴巴很像的工具条）
（例子见下面下载……）
1：页面
单击好友显示好友列表（这里是虚拟的），单击好友弹出对话框。
（例子见下面下载……）
1：页面
单击好友显示好友列表（这里是虚拟的），单击好友弹出对话框。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>聊天</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript">
var _IsMousedown = 0;
var _ClickLeft = 0;
var _ClickTop = 0;
function moveInit(divID,evt)
{
_IsMousedown = 1;
if(getBrowserType() == "NSupport")
{
return;
}
var obj = getObjById(divID);
if(getBrowserType() == "fox")
{
_ClickLeft = evt.pageX - parseInt(obj.style.left);
_ClickTop = evt.pageY - parseInt(obj.style.top);
}else{
_ClickLeft = evt.x - parseInt(obj.style.left);
_ClickTop = evt.y - parseInt(obj.style.top);
}
}
function Move(divID,evt)
{
if(_IsMousedown == 0)
{
return;
}
var objDiv = getObjById(divID);
if(getBrowserType() == "fox")
{
objDiv.style.left = evt.pageX - _ClickLeft;
objDiv.style.top = evt.pageY - _ClickTop;
}
else{
objDiv.style.left = evt.x - _ClickLeft;
objDiv.style.top = evt.y - _ClickTop;
}
}
function stopMove()
{
_IsMousedown = 0;
}
function getObjById(id)
{
return document.getElementById(id);
}
function getBrowserType()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
//alert(browser);
if ((browser=="Netscape"))
{
return "fox";
}
else if(browser=="Microsoft Internet Explorer")
{
if(version>=4)
{
return "ie4+";
}
else
{
return "ie4-";
}
}
else
{
return "NSupport";
}
}
function showdiv1(){
var d=document.getElementById('subpanel');
d.style.display="block";
}
function hiddendiv1(name){
var d=document.getElementById('subpanel');
d.style.display="none";
document.getElementById('movediv').style.display='block';
document.getElementById('user').innerHTML=name
document.getElementById("speaker").value=name;
}
function hiddendiv2(){
document.getElementById('getmessage').onLoad="";
}
</script>
</head>
<body onLoad="sendEmptyRequest();">
<div id="getmessage"></div>
<div id="footpanel">
<ul id="mainpanel">
<li id="chatpanel">
<a href="#" class="chat" onClick="showdiv1()">在线好友(<em>6</em>)</a>
<div class="subpanel" id="subpanel">
<h3><span> – </span>在线好友</h3>
<ul>
<li><a href="#" onClick="hiddendiv1('张三')"><img src="img/user.png" />张三</a></li>
<li><a href="#" onClick="hiddendiv1('李四')"><img src="img/user.png" />李四</a></li>
<li><a href="#" onClick="hiddendiv1('王五')"><img src="img/user.png" />王五</a></li>
<li><a href="#" onClick="hiddendiv1('赵六')"><img src="img/user.png" />赵六</a></li>
<li><a href="#" onClick="hiddendiv1('abc')"><img src="img/user.png" />abc</a></li>
<li><a href="#" onClick="hiddendiv1('123')"><img src="img/user.png" />123</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div id="movediv" style="left:20px;top:20px;" onMouseDown="moveInit('movediv',event);" onMouseMove="Move('movediv',event)" onMouseUp="stopMove()" onMouseOut="stopMove()">
<table style="width:376px; background-color: #f0f5fb;border:none; ">
<tr>
<td width="40%">
<span style="font-size:15px;"> 与<label id="user"></label>在线聊天中
</span>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
