先上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>留言功能</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <style type="text/css"> </style> <script type="text/javascript"> $(function(){ $("#tijiao").click(function(){ var name=$("#name").val(); var info=$(".infos").val(); var date=new Date(); var year=date.getFullYear(); var month=date.getMonth()+1; var day=date.getDate(); var hour=date.getHours(); var min=date.getMinutes(); var secon=date.getSeconds(); var riqi=year+"-"+month+"-"+day+" "+hour+":"+min+":"+secon var obj=("<li>昵称:"+name+" 内容:"+info+" 日期"+riqi+"</li><br/>"); $("#ul1:last").append(obj); }) }) </script> </head> <body> <div id="menu"> <p>昵称:<input type="text" id="name"></p> <p>内容:<textarea value="在这留言" style="width: 200px; height: 200px" class="infos">在这留言</textarea></p> <p><input type="button" value="提交" id="tijiao"></p> <p><h1>所有留言</h1></p> <ul id="ul1"> </ul> </div> </body> </html>
原理:在网页中提交的内容是把表单里面的值提取出来,然后显示到下面的指定div中