jQuery在线聊天室案例呢
jQuery在线聊天室案例呢
1 回答
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style>
*{
margin:0;
padding:0
}
#container{
border:solid 1px black;
height:580px;
width:600px;
position:relative;
margin:50px auto;
padding:5px;
}
#content{
border:solid 1px black;
height:350px;
width:350px;
position:absolute;
margin-top:20px;
margin-left:20px;
overflow-y:scroll;
}
#content:hover{
border:solid 3px black;
}
#peopleList{
border:solid 1px black;
height:350px;
width:200px;
position:absolute;
margin-top:20px;
margin-left:385px;
overflow-y:scroll;
}
#peopleList li{
list-style: none;
padding:5px;
margin-top:10px;
}
#peopleList .name-list .tools{
position:absolute;
display:inline-block;
margin-left:100px;
}
#peopleList .name-list .show-name{
position:absolute;
font-weight:bold;
margin-left:2px;
width:90px;
}
#peopleList .name-list .tools button
{
width:15px;
height:15px;
border:none;
}
#peopleList:hover{
border:solid 3px black;
}
#name{
height:50px;
width:350px;
position:absolute;
margin-top:380px;
margin-left:20px;
}
#name input{
margin-top:7.5px;
font-size:20px;
height:30px;
width:240px;
}
#name label{
font-weight:bold;
}
#MsgBoard{
height:50px;
width:200px;
position:absolute;
margin-top:380px;
margin-left:385px;
}
#MsgBoard .titleName{
margin-top:3px;
margin-left:35px;
text-align:center;
font-family:"Microsoft YaHei";
font-weight:bold;
font-style:italic;
font-size:40px;
color:red;
}
#chart{
height:110px;
width:350px;
position:absolute;
margin-top:450px;
margin-left:20px;
}
#chart textarea{
height:110px;
width:350px;
}
#send{
height:110px;
width:200px;
position:absolute;
margin-top:450px;
margin-left:385px;
}
#send input{
height:110px;
width:200px;
font-size:50px;
}
.hidden{
display:none
}
.spanMsg{
display:inline-block;
margin:5px 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
</div>
<div id="peopleList">
<ul id="people-list"></ul>
</div>
<div id="name">
<label>留言者姓名:</label>
<input id="txt" type="text" name="nameTxt" value="">
</div>
<div id="MsgBoard">
<span class="titleName">留言板</span>
</div>
<div id="chart">
<textarea id="txtarea" style="font-size:20px"rows="3" cols="25"></textarea>
</div>
<div id="send">
<input id="clickSend" type="button" name="send" value="发送"/>
</div>
</div>
<div id="templates" class="hidden">
<ul id="name-template">
<li class="name-list">
<span class="show-name"></span>
<div class ="tools">
<button class="delete" title="Delete">X</button>
<button class="move-up" title="Up">^</button>
<button class="move-down" title="Down">v</button>
</div>
</li>
</ul>
</div>
<script>
$(function(){
$("#clickSend").bind("click",function(){
if(($("#txt").val()=="")&&($("#txtarea").val()!="")){ alert("请输入留言者姓名");}
if(($("#txt").val()!="")&&($("#txtarea").val()=="")){ alert("请输入留言者信息");}
if(($("#txt").val()=="")&&($("#txtarea").val()=="")){ alert("请输入留言者姓名和留言信息");}
if(($("#txt").val()!="")&&($("#txtarea").val()!="")){
addName();
addMsg();
$("#txt").val("");
$("#txtarea").val("");
return false;
}
})
});
function addName(){
var peopleName=$("#txt").val();
if(peopleName){
addPeopleInfo(peopleName);
}
}
function addPeopleInfo(peopleName){
var $name=$("#name-template .name-list").clone();
$("span.show-name",$name).text(peopleName);
$("#people-list").append($name);
$("button.delete",$name).click(function(){
$name.remove();
});
$("button.move-up",$name).click(function(){
$name.insertBefore($name.prev());
});
$("button.move-down",$name).click(function(){
$name.insertAfter($name.next());
});
}
function addMsg(){
var dates=new Date();
var years=dates.getFullYear();
var month=dates.getMonth()+1;
var days=dates.getDate();
var hours=dates.getHours();
var minutes=dates.getMinutes();
var seconds=dates.getSeconds();
var timeTable=years+"年"+month+"月"+days+"日"+hours+":"+minutes+":"+seconds;
var $people_Name=$("#txt").val();
var $Msg=$("#txtarea").val();
var $fullMsg="<span class='spanMsg'>"+"“"+$people_Name+"”于"+timeTable+"留言道:"+$Msg+ "</span>";
$("#content").append($fullMsg);
}
</script>
</body>
</html>
举报
0/150
提交
取消
