<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<title>简易留言板</title>
<meta http-equiv="content-type" content="text/htm; charset=utf-8"/>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style type="text/css">
body {
font-size: 14px;
}
textarea {
height: 50px;
width: 400px;
border: 1px solid #ccc;
margin: 10px;
}
button {
cursor: pointer;
margin-left: 15%;
width: 100px;
}
div {
height: 100px;
width: 400px;
border: 1px solid #ccc;
margin: 10px;
cursor: text;
}
.time {
font-size: 12px;
color: #ccc;
}
#show {
overflow-y: scroll;
}
p {
line-height: 12px;
}
span {
display: block;
height: 40px;
width: 400px;
}
</style>
</head>
<body>
<div id="show" type="text"/></div>
<textarea id="content" type="text"/></textarea><br/>
<button>发 送</button>
<span id="tip"></span>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
if ($('#content').val() == '') {
alert('发送不能为空！')
}
else {
var msg=$('#content').val();
var mydate = new Date();
var newMsg = '<p class="time">'+mydate.getMonth()+1+'月'+mydate.getDate()+'日'+mydate.getHours()+':'+mydate.getMinutes()+':'+mydate.getSeconds()+'</p><br/>'+msg;
$.ajax({
url:'',
data: newMsg,
success: function(data) {
$('#show').append(newMsg);
$('#content').val('').focus();
}
})
}
})
$('#tip').ajaxStart(function(){
$(this).show().html('正在发送消息……');
$(this).css('background-color','red');
});
$('#tip').ajaxStop(function(){
$(this).html('发送消息成功！');
$(this).css('background-color','red');
});
})
</script>
</body>
</html>
李晓健
相关分类