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中

相关文章
|
7月前
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
|
7月前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
64 0
|
JSON JavaScript 前端开发
jQuery动画功能和封装原理
jQuery动画功能和封装原理
85 0
|
28天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
33 5
|
6月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
48 0
|
6月前
|
JavaScript 前端开发 索引
jQuery如何实现一个轮播图左右翻页的功能
jQuery如何实现一个轮播图左右翻页的功能
51 0
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
106 0
jQuery点击图片来回切换功能
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
173 0
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
65 0