留言板

<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">主人寄语:&nbsp;&nbsp;<span>编辑您的寄语</span></p>
<div class="line1"></div>
<div class="header"><img src="good.jpg"></div>
<p class="wind">像风一样自由~</p>
<p class="said">留言(2000)&nbsp;&nbsp;<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>

 

posted @ 2015-11-25 16:45  像风一样自由~~~  阅读(248)  评论(0编辑  收藏  举报