<html><head><title>留言板</title><style rel="stylesheet" type="text/css"/>body{ margin:0; padding
<html><head><title>留言板</title><style rel="stylesheet" type="text/css"/>body{ margin:0; padding:0; font-size: 14px;}#content{ width: 400px; margin:30px;}#top{ border: 1px solid #000;}#mid,#bot{ margin-top: 14px;}#title{ font-size: 18px; text-align: center; border-bottom: 1px solid #000; padding: 6px; background-color:#888;}#msg{ height: 360px; overflow-y:scroll;}#msg ul{ background-color: #f0f0f0; border:1px solid #000; border-radius: 10px; margin:10px; padding: 10px;}#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{ margin-left: 10px;}.tip{ background-color: #fff;}.showtip{ padding: 5px; margin-left: 30px; border-radius: 8px; background-color: #c8c8c8;}#txt{ border: 1px solid #000; font-size: 14px; color: #c8c8c8; width:400px; height: 70px; vertical-align: top;}input{ font-size: 14px; margin-top: 14px; border: 1px solid #000;}#newname{ color:#c8c8c8;}#submit{ margin-left: 20px;}.clear{ float: none;}#clear{ margin-left: 14px;} </style> <script src="http://libs.baidu.com/jquery/1.8.3/jquery.js" type="text/javascript"></script> </head><body><script> $(function(){ //进入页面显示当前时间 var ft=cusTime(new Date()); $("#ct").text(ft); //留言信息输入框鼠标事件 $("#txt").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('focus',function(){ if($(this).val()=="请输入姓名"){ $(this).val(""); } $(this).css('color','#000'); }) $("#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("请输入姓名"); } }) } $("#tip").ajaxStart(function(){ $(this).text("正在发送").attr("class","showtip"); }) $("#tip").ajaxStop(function(){ $(this).text("发送成功").attr("class","showtip"); }) //2秒后取消提示 setTimeout(function(){ $("#tip").text("").attr("class","tip"); },2000) }) //清空已输入的留言信息 $("#clear").bind('click',function(){ $("#txt").val("请输入留言信息"); $("#newname").val("请输入姓名"); }) }) //定时刷新当前时间 setInterval(function(){ var ct=cusTime(new Date()); $("#ct").text(ct); },1000) //自定义时间格式 function cusTime(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); } //个位数加0补成十位数 function setDouble(num){ num=(num<10)?("0"+num):num; return num; }</script> <div id="content"> <div id="top"> <div id="title">留言板</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="请输入姓名" /> <input type="button" id="submit" value="提交" /> <input type="button" id="clear" value="清空" /> </div> </div></body></html>
