jQuery最简单的留言功能^-^

简介: jQuery最简单的留言功能^-^

先上代码:

<!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中

目录
相关文章
|
3天前
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
13 0
|
3天前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
34 0
|
8月前
|
JSON JavaScript 前端开发
jQuery动画功能和封装原理
jQuery动画功能和封装原理
56 0
|
6月前
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
67 0
jQuery点击图片来回切换功能
|
6月前
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
60 0
|
6月前
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
33 0
|
11月前
|
JavaScript
jQuery实现下拉列表选择条目左右选择功能
jQuery实现下拉列表选择条目左右选择功能
|
JavaScript
jQuery最简单的留言功能^-^
jQuery最简单的留言功能^-^
67 0
|
移动开发 JavaScript 前端开发
如何使用jQuery实现地理围栏功能?
如何使用jQuery实现地理围栏功能?