<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{ 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; 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; 1000px; height: 70px; vertical-align: top; } input{ font-size: 14px; margin-top: 14px; border: none; 60px; height: 30px; line-height: 30px; border-radius: 3px; } #newname{ color:#c8c8c8; border: 1px solid; 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; 90%; margin: 0 auto; } .line1 { height: 1px; background-color: #ddd; line-height:1px; clear: both; display: block; overflow: hidden; 90%; margin: 0 auto; } .line2 { height: 1px; background-color: #ddd; line-height:1px; clear: both; display: block; overflow: hidden; 95%; margin: 0 auto; } .owner{ margin-left: 60px; } .owner span{ color: #26709a; font-size: 12px; } .header img{ 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; 0; height: 0; border- 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>