php开源在线聊天室,在线聊天室制作 | Online-Chat

html>

AJAX TEST  留言板

*{

margin:0;

padding:0;

}

#wrap{

margin:10px auto;

width:500px;

height:600px;

border:0;

border-radius:10px;

padding:10px;

background:#fff;

box-shadow:0 0 10px rgba(0,0,0,0.1);

}

#content{

position:absolute;

width:280px;

height:380px;

background:#eee;

padding:10px;

border-radius:5px;

font-size:14px;

color:#888;

}

#content #cShow{

margin-top:5px;

width:280px;

height:355px;

padding-top:5px;

text-indent: 5px;

border-radius:5px;

background:#fff;

box-shadow:0 0 10px rgba(0,0,0,0.1);

}

#list{

float:right;

width:190px;

height:380px;

padding:10px;

border-radius:5px;

font-size:14px;

color:#888;

background:#eee;

}

#list #nameList{

margin-top:5px;

width:190px;

height:355px;

padding-top:5px;

text-indent: 5px;

border-radius:5px;

background:#fff;

box-shadow:0 0 10px rgba(0,0,0,0.1);

}

#form{

margin-top:410px;

width:480px;

height:170px;

padding:10px;

border-radius:5px;

background:#eee;

}

#form #getInfo{

width:480px;

height:125px;

border:0;

border-radius:5px;

box-shadow:0 0 10px rgba(0,0,0,0.1);

font-size:14px;

text-indent:5px;

padding-top:5px;

}

#form #getName{

width:170px;

height:32px;

margin-top:7px;

font-size:14px;

text-indent:5px;

color:#999;

border:0;

border-radius:3px;

box-shadow:0 0 10px rgba(0,0,0,0.1);

}

#form span{

font-size:14px;

color:#888;

margin-left:5px;

}

#form #submit{

float:right;

width:100px;

height:31px;

margin-top:7px;

border:0;

border-radius:3px;

box-shadow:0 2px 1px rgb(145,13,35);

background:#e8554e;

color:#fff;

cursor:pointer;

}

#form #submit:hover{

background:#555;

box-shadow:0 2px 1px black;

}

内容显示如下:

当前在线名单:

Status:

$(function(){

$("#submit").bind("click",function(){

if(($('#getInfo').val()!='')&&($('#getName').val()=='')){alert('请输入姓名');}

if(($('#getInfo').val()=='')&&($('#getName').val()!='')){alert('请输入信息');}

if(($('#getInfo').val()=='')&&($('#getName').val()=='')){alert('请输入姓名和信息');}

if(($('#getInfo').val()!='')&&($('#getName').val()!='')){

$('#status').html("Starting……");

setTimeout(function(){

$('#status').html("Stop!");

},2000)

addName();

addMsg();

$('#getInfo').val("");

$('#getName').val("");

return false;

}

})

})

function addName(peopleName){

var peopleName = $('#getName').val();

if(peopleName){

var $name = "

"+peopleName+"";

$('#nameList').append($name);

}

}

function addMsg(){

var dates = new Date();

var years = dates.getFullYear();

var month = dates.getMonth()+1;

var days = dates.getDay();

var hours = dates.getHours();

var minutes = dates.getMinutes();

var seconds = dates.getSeconds();

var time = years+"年"+month+"月"+days+"日"+hours+":"+minutes+":"+seconds;

var $people_name = $("#getName").val();

var $people_info = $("#getInfo").val();

var $fullMsg = ""+"“"+$people_name+"”"+"于"+"&nbsp"+time+"&nbsp"+"说:"+$people_info+""+"";

$("#cShow").append($fullMsg);

}

下面是案例界面：