<html>
<head>
<meta charset="utf-8">
<title>留言板</title>
<script src="jquery.js" type="text/javascript"></script>
<style rel="stylesheet" type="text/css">
body{
margin:0;
padding:0;
font-size: 14px;
font-family: "微软雅黑";
}
#content{
width: 1000px;
margin: 30px auto;
}
#top{
border: 1px solid #ccc;
}
#mid,#bot{
margin-top: 14px;
}
#title{
text-align: left;
padding: 6px;
color: #26709a;
font-size: 16px;
margin-left: 60px;
}
#msg{
height: 360px;
overflow-y:scroll;
}
#msg ul{
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 10px;
margin: 10px;
padding: 10px;
width: 850px;
margin: 20px auto;
}
#msg li{
list-style: none;
}
.msgcontent{
text-indent: 28px;
font-size: 14px;
margin-bottom: 14px;
line-height: 20px;
}
.msginfo{
text-align: right;
}
.author{
margin-left: 24px;
}
#ct{
color: #26709a;
}
.tip{
background-color: #fff;
}
.showtip{
padding: 5px;
margin-left: 30px;
border-radius: 8px;
background-color: #c8c8c8;
}
#txt{
border: 1px solid #ccc;
font-size: 14px;
color: #c8c8c8;
width:1000px;
height: 70px;
vertical-align: top;
}
input{
font-size: 14px;
margin-top: 14px;
border: none;
width: 60px;
height: 30px;
line-height: 30px;
border-radius: 3px;
}
#newname{
color:#c8c8c8;
border: 1px solid;
width: 1000px;
}
#submit{
background-color: #728395;
color: #fff;
font-weight: 800;
}
.clear{
float: none;
}
#clear{
margin-left: 14px;
background-color: #728395;
color: #fff;
font-weight: 800;
}
.line {
height: 2px;
background-color: #ddd;
line-height: 2px;
clear: both;
display: block;
overflow: hidden;
width: 90%;
margin: 0 auto;
}
.line1 {
height: 1px;
background-color: #ddd;
line-height:1px;
clear: both;
display: block;
overflow: hidden;
width: 90%;
margin: 0 auto;
}
.line2 {
height: 1px;
background-color: #ddd;
line-height:1px;
clear: both;
display: block;
overflow: hidden;
width: 95%;
margin: 0 auto;
}
.owner{
margin-left: 60px;
}
.owner span{
color: #26709a;
font-size: 12px;
}
.header img{
width: 800px;
margin: 20px auto;
display: block;
}
.wind{
text-align: center;
color: #26709a;
font-size: 16px;
}
.said{
margin: 40px 0 8px 40px;
}
.said span{
color: #26709a;
}
.triangle_border_down {
display: block;
width: 0;
height: 0;
border-width: 10px 7px 0 7px;
border-style: solid;
border-color: #26709a transparent transparent;
position: relative;
top: -22px;
left: 21.5%;
}
</style>
</head>
<body>
<div id="content">
<div id="top">
<div id="title">留言板</div>
<div class="line"></div>
<p class="owner">主人寄语： <span>编辑您的寄语</span></p>
<div class="line1"></div>
<div class="header"><img src="good.jpg"></div>
<p class="wind">像风一样自由~</p>
<p class="said">留言（2000） <span>留言板设置</span></p>
<span class="triangle_border_down"></span>
<div class="line2"></div>
<div id="msg"></div>
</div>
<div id="mid">
<span id="ct"></span>
<span id="tip"></span>
</div>
<div id="bot">
<textarea id="txt">请输入留言信息</textarea>
<br />
<input type="text" id="newname" value="请输入姓名" />
<br>
<input type="button" id="submit" value="发表" />
<input type="button" id="clear" value="清空" />
</div>
</div>
<script>
$(function(){
//设置当前时间并定时刷新当前时间
setInterval(function(){
var nowDate=nowTime(new Date());
$("#ct").html(nowDate);
},1000)
//留言信息输入框鼠标事件，得到焦点
$("#txt").bind('focus',function(){
if($(this).val()=="请输入留言信息"){
$(this).val("");
}
$(this).css("color","#000");
})
//留言人信息输入框鼠标事件
$("#newname").bind('focus',function(){
if($(this).val()=="请输入姓名"){
$(this).val("");
}
$(this).css("color","#000");
})
// 失去焦点
$("#txt").bind('blur',function(){
if($(this).val()==""){
$(this).val("请输入留言信息");
}
$(this).css('color','#c8c8c8');
})
$("#newname").bind('blur',function(){
if($(this).val()==""){
$(this).val("请输入姓名");
}
$(this).css('color','#c8c8c8');
})
//提交新留言
$("#submit").bind('click',function(){
if(($("#txt").val()=="请输入留言信息")&&($("#newname").val()=="请输入姓名")){
$("#tip").text("留言信息和姓名不能为空！").attr("class","showtip");
$("#txt").focus();
}
else if($("#txt").val()=="请输入留言信息"){
$("#tip").text("留言信息不能为空！").attr("class","showtip");
$("#txt").focus();
}
else if($("#newname").val()=="请输入姓名"){
$("#tip").text("姓名不能为空！").attr("class","showtip");
$("#newname").focus();
}
else{
var $newtxt=$("#txt").val();
var $newName=$("#newname").val();
var $newTime=$("#ct").html();
var $newMsg="<ul><li class='msgcontent'>"
+$newtxt
+"</li><li class='msginfo'><span class='pubdate'>"
+$newTime
+"</span><span class='author'>"
+$newName
+"</span></li></ul>";
$.ajax({
url:"",
data:$newMsg,
success:function(data){
$("#msg").append($newMsg);
$("#txt").val("请输入留言信息");
$("#newname").val("请输入姓名");
}
})
}
})
$("#clear").bind('click',function(){
$("#txt").val("请输入留言信息");
$("#newname").val("请输入姓名");
})
})
//自定义时间格式
function nowTime(date){
var year=date.getFullYear();
var month=setDouble(date.getMonth()+1);
var day=setDouble(date.getDate());
var hour=setDouble(date.getHours());
var minute=setDouble(date.getMinutes());
var second=setDouble(date.getSeconds());
return(year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second);
}
function setDouble(num){
num=(num<10)?("0"+num):num;
return num;
}
</script>
</body>
</html>
