很早就想发出来了,一直以来都没什么时间,今天偷个空先把代码发上面,明天来写注释.
还是那句话,AJAX是一种应用,而不是一个专门的技术,我认为做做DEMO要的是速度,要让看的人好理解,而JS是最基本的WEB语言,相信比起其他的语言来说,要明了很多,所以我还是选择用JS写前后台代码.但并不代表我不会其他的语言,程序关键还是在于自我对实现的想法,而用什么语言,好比选择工具一样,我用菜刀可以做,用瑞士军刀也可以做,关键是要看在什么场合.
再就AJAX实际上首要考虑的是人性化,人机交互的便利才是他的优势,否则我还是劝你使用FLASH的AS来的更快.
记住这个词--认知潜意识.千万不要让用户感觉到操作的不适应,你也一定要想在用户的前面,也许这就是程序不智能的位置.
如果你喜欢的话可以继续开发这个东西,更希望你能够注明一下转载出处,我会觉得非常地高兴,并写出更多更好的东西.
首页HTML代码:请保存为index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Chating Beta_0.3.23</title>
<link href="https://www.jb51.net/images/chatstyle.css" type="text/css" />
<script type="text/javascript" src="https://www.jb51.net/images/chat.js"></script>
<script type="text/javascript" src="https://www.jb51.net/images/display.js"></script>
</head>
<body>
<div></div>
<div>Chating Beta_0.3.23</div>
<div><div><div></div></div></div>
<div>昵称：
<input type="text" />
<span><input type="text" title="提交对话
快捷键:Enter或Ctrl + Enter
清除
快捷键:Ctrl + Delete" /><input type="button" value=" " title="向前一条对话记录
快捷键:↑" /><input type="button" value=" " title="向后一条对话记录
快捷键:↓" />
<input type="image" src="https://www.jb51.net/images/rest.gif" title="提交对话
快捷键:Enter或Ctrl + Enter" />
</span>
<span></span>
</div>
</body>
</html>
CSS文件:请保存为 images/chatstyle.css
body{
margin: 0px;
padding: 0px;
font-size: 9pt;
background-image: url(JD112.jpg);
background-position: center center;
}
#outmain{
height: 400px;
font-size: 9pt;
overflow-y: scroll;
overflow-x: hidden;
SCROLLBAR-ARROW-COLOR:#FF9900;
SCROLLBAR-FACE-COLOR:#FFF9E1;
SCROLLBAR-DARKSHADOW-COLOR:#FF9900;
SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;
SCROLLBAR-3DLIGHT-COLOR:#FF9900;
SCROLLBAR-SHADOW-COLOR:#FFFFFF;
SCROLLBAR-TRACK-COLOR:#FFF9E1;
}
#chatmain{}
#outs{
width: 540px;
margin-right: auto;
margin-left: auto;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #FFF9E1;
border: 1px solid #AAA;
clear: both;
}
.in{
text-align: center;
}
.names{
border: 1px solid #AAA;
background-color: #FFF9E1;
width: 80px;
height: 19px;
line-height: 19px;
}
#loadifo {
position:absolute;
top:100px;
z-index:1;
right: 10px;
line-height: 21px;
}
.header{
height: 60px;
background-color: #000;
text-align: center;
color: #FFF;
font-weight: bold;
line-height: 60px;
font-family: Tahoma;
font-size: 12pt;
float: left;
width: 100%;
margin-bottom: 20px;
filter: Alpha(Opacity=50);
opacity: 0.5;
}
/*效果*/
.btn{
border: 1px solid #AAA;
position: absolute;
margin-top: 2px;
}
.inputs{
font-size: 9pt;
background-image: url(input.png);
background-repeat: no-repeat;
width: 295px;
line-height: 21px;
height: 21px;
margin: 0px;
padding: 0px;
border: 1px solid #AAA;
}
.left,.right{
background-repeat: no-repeat;
background-position: center center;
cursor:pointer;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-color: #FFF;
height: 23px;
width: 23px;
}
.left{
background-image: url(l1.gif);
}
.right{
background-image: url(r1.gif);
}
JS主文件: 请保存为 images/chat.js