带你玩转JavaWeb开发之四-JS库代码实现

2022年05月10日 阅读数:8
这篇文章主要向大家介绍带你玩转JavaWeb开发之四-JS库代码实现,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

简单案例

使用JQuery完成页面定时弹出广告

使用JQuery完成表格的隔行换色

使用JQuery完成复选框的全选效果

使用JQuery完成省市联动效果

使用JQuery完成下列列表左右选择

使用JQuery完成表单的校验.

案例须要

掌握JQuery的基本使用

掌握JQuery的基本选择器,层次选择器

会使用JQuery完成DOM的基本操做

定时弹出广告javascript

  • 定时器: setInterval setTimeout
    • clearInterval
  • style.display : none 隐藏 block显示

注册表单:css

  • 事件: onfocus 获焦点 onblur 失去焦点 onkeyup 按键抬起的时候html

  • 正则表达式校验邮箱. js . java

    • javascript
      <script type="text/javascript" src="../js/check.js" ></script>
  • onsubmit = “return checkForm()”jquery

表格隔行换色web

  • table.rows
    • row.style.backgroundColor
  • window.onload

表格全选和全不选:正则表达式

​ checked属性:数组

​ document.getElementById()ruby

​ document.getElementsByName() 返回的是一个数组服务器

省市联动:

​ DOM:

​ //建立节点: document.createElement()

​ //建立文本节点: document.createTextNode()

​ //添加节点: appendChild()

商品左右选择中:

​ 事件:

​ select改变的时候:

​ onchange

​ ondbclick()

1. 使用JQuery完成页面定时弹出广告

1.1 需求分析:

当用户打开界面,3秒钟以后弹出广告,这个广告显示5秒钟,隐藏广告

如何定时弹出广告

如何显示广告

如何隐藏广告

1.2 技术分析

【什么是JQuery】

【JQuery的做用是什么】

它封装了不少效果,事件,可以大大的提升咱们的开发效率

将咱们的页面和Js分离出来

【JQuery的入门】

    <script>            
            window.onload = function(){
   
   
                alert("window.onload 结束");
            }

            window.onload = function(){
   
   
                 alert("window onload 2  结束啦")
            }
            //jQuery的写法
            jQuery(document).ready(function(){
   
   
                alert("jquery ready 结束");   
            });

            jQuery(document).ready(function(){
   
   
                alert("jqeuery ready 结束啦");
            });

            //咱们发现ready时间能够被屡次调用,而且不会像window.onload时间同样被覆盖,执行顺序是按定义顺序执行

            // jQuery  = $
            $(document).ready(function(){
   
   
                alert("jqeuery ready 结束啦啦啦");
            });

            //更加简洁的写法
            $(function(){
   
   
                alert("jquery 终极简洁版");
            });
        </script>

【JQ和JS之间的转换】

JS对象只能调用JS的属性和方法

JQ对象只能调用JQ的属性和方法

        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            //1. 给按钮注册事件, onclick 事件
            //2. 实现事件对应的函数
            function change(){
     
     
                //找到span 元素
                var span = document.getElementById("span");
//              span.innerHTML="我被JS按钮修改了内容";

                $(span).html("我调用了JQ的方法");
            }

            $(function(){
     
     
                //1.须要找到要绑定事件的元素
                $("#jq_btn").click(function(){
     
     
                    //2. 找到咱们要操做的元素
                    //$("#span").html("我被JQ按钮修改啦");
                    $("#span")[0].innerHTML="我调用的是JS属性";

                    $("#span").get(0).innerHTML="我经过get(0)调用的是JS属性";

                });
            });

        </script>

【JQ中根据ID查找元素】

$("#ID")    JQuery中的ID选择器 

【JQ中的动画效果】

show : 控制元素显示
hide : 隐藏元素
toggle : 开关效果,循环调用
slideDown : 向下滑动
slideUp : 向上滑动
slideToggle : 开关上下滑动
animate : 自定义动画
stop : 中止动画
delay : 延迟执行

1.3 步骤分析:

  1. 注册一个JQ中ready 事件
  2. 3秒以后显示广告, show(3000);
  3. 显示5秒钟
  4. 隐藏广告

代码实现

/*
             1. 肯定事件 : onload
             2. 文档加载完成,三秒以后弹出广告(先得找到要显示的广告元素)
             3. 广告显示三秒钟
             4. 隐藏广告
             * */
            $(function(){
   
   
                function showAD(){
   
   
                    $("#ad").show();
                    setTimeout(hideAD,3000);
                }
                function hideAD(){
   
   
                    $("#ad").hide();
                }
                setTimeout(showAD,1000);
            }); 

JQuery中的选择器

​ 选择器的目的是让咱们可以更加精确的找到页面中的元素

基本选择器
  • ID选择器

    $("#id")
  • 类选择器

    $(".className")
  • 元素选择器

    $("元素的名称")
  • 通配符选择器

    $("*")
  • 选择器,选择器

    $("#id,.className")

基本选择器的案例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的基本选择器</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
     
     
                //ID选择器
                $("#btn_id").click(function(){
     
     
                    $("#one").css("backgroundColor","#bbffaa");
                });
                //元素选择器
                $("#btn_element").click(function(){
     
     
                    $("div").css("backgroundColor","#bbffaa");
                });
                //类选择器
                $("#btn_mini").click(function(){
     
     
                    $(".mini").css("backgroundColor","#bbffaa");
                });
                //通配符选择器
                $("#btn_all").click(function(){
     
     
                    $("*").css("backgroundColor","#bbffaa");
                });
                //多选择器
                $("#btn_selector").click(function(){
     
     
                    $(".mini,span").css("backgroundColor","#bbffaa");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="选择ID为one的元素" id="btn_id" />
        <input type="button" value="选择全部div元素" id="btn_element" />
        <input type="button" value="选择全部mini类的元素" id="btn_mini" />
        <input type="button" value="通配符选择器" id="btn_all" />
        <input type="button" value="多选择器" id="btn_selector" />

        <hr />
        <div id="one">
            <div class="mini">
                1-111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                2-111
            </div>
            <div class="mini">
                2-222
            </div>
        </div>
        <div id="three">
            <div class="mini">
                3-111
            </div>
            <div class="mini">
                3-222
            </div>
            <div class="mini">
                3-333
            </div>
        </div>
        <span id="four">
            span
        </span>
    </body>
</html>
JQ中的层级选择器
  • Ancestor descendant后代选择器
  • parent > child子元素选择器
  • prev + next 兄弟元素选择器
  • prev ~ siblings 全部兄弟选择器
JQ中层级选择器案例代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的层级选择器</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
    
    
                //ancestor descendant 后代选择器
                $("#btn1").click(function(){
    
    
                    $("body div").css("backgroundColor","#bbffaa");
                });
                //parent > child 父子选择器
                $("#btn2").click(function(){
    
    
                    $("body > div").css("backgroundColor","#bbffaa");
                });
                //prev + next 父子选择器
                $("#btn3").click(function(){
    
    
                    $("#two + div").css("backgroundColor","#bbffaa");
                });
                //prev + next 兄弟选择器
                $("#btn3").click(function(){
    
    
                    $("#two + div").css("backgroundColor","#bbffaa");
                });
                //prev ~ next 同辈选择器
                $("#btn4").click(function(){
    
    
                    $("#one ~ div").css("backgroundColor","#bbffaa");
                });


            });
        </script>
    </head>
    <body>
        <input type="button" value="选择body中全部的后代div" id="btn1" />
        <input type="button" value="选择body中全部的子div" id="btn2" />
        <input type="button" value="选择id为two的下一个元素" id="btn3" />
        <input type="button" value="选择id为one的全部同辈" id="btn4" />


        <hr />

        <div id="one">
            <div class="mini">
                1-111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                2-111
            </div>
            <div class="mini">
                2-222
            </div>
        </div>
        <div id="three">
            <div class="mini">
                3-111
            </div>
            <div class="mini">
                3-222
            </div>
            <div class="mini">
                3-333
            </div>
        </div>
        <span id="four">
            span
        </span>

    </body>
</html>
JQ中的基本过滤器
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的基本过滤器</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
    
    
                //找到第一个mini div
                $("#btn1").click(function(){
    
    
                    $(".mini:first").css("backgroundColor","#bbffaa");
                });
                //找到最后一个mini div
                $("#btn2").click(function(){
    
    
                    $("div .mini:last").css("backgroundColor","#bbffaa");
                });

                //过滤基数/偶数div
                $("#btn3").click(function(){
    
    
                    $("body div:odd").css("backgroundColor","#FFFFEE");
                    $("body div:even").css("backgroundColor","#bbffaa");
                });

                //找出全部的div 剔除id为two
                $("#btn4").click(function(){
    
    
                    $("body div:not(#two)").css("backgroundColor","#FFFFEE");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="找出第一个mini div" id="btn1" />
        <input type="button" value="找出最后一个mini div" id="btn2" />
        <input type="button" value="过滤基数/偶数div" id="btn3" />
        <input type="button" value="找过全部div 剔除Id为two" id="btn4" />

        <hr />

        <div id="one">
            <div class="mini">
                1-111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                2-111
            </div>
            <div class="mini">
                2-222
            </div>
        </div>
        <div id="three">
            <div class="mini">
                3-111
            </div>
            <div class="mini">
                3-222
            </div>
            <div class="mini">
                3-333
            </div>
        </div>
        <span id="four">
            span
        </span>

    </body>
</html>
JQ中的属性选择器
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的属性选择器</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
    
    
                //选择有title属性的div
                $("#btn1").click(function(){
    
    
                    $("div[title]").css("backgroundColor","#bbffaa");
                });
                //选择有title='bbb'属性的div
                $("#btn2").click(function(){
    
    
                    $("div[title='bbb']").css("backgroundColor","#bbffaa");
                });

            });
        </script>
    </head>
    <body>
        <input type="button" value="选择有title属性的div" id="btn1" />
        <input type="button" value="选择有title='bbb'属性的div" id="btn2" />


        <hr />

        <div id="one">
            <div class="mini" title="aaa">
                1-111
            </div>
        </div>
        <div id="two">
            <div class="mini" title="bbb">
                2-111
            </div>
            <div class="mini">
                2-222
            </div>
        </div>
        <div id="three">
            <div class="mini">
                3-111
            </div>
            <div class="mini">
                3-222
            </div>
            <div class="mini">
                3-333
            </div>
        </div>
        <span id="four">
            span
        </span>

    </body>
</html>

JQ中的表单过滤器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
    
    
                $("#btn1").click(function(){
    
    
                    $(":text").css("background-color","#E9FBEB")
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="筛选出全部的input" />
        <hr />
        <form>
          <input type="text" />
          <input type="checkbox" />
          <input type="radio" />
          <input type="image" />
          <input type="file" />
          <input type="submit" />
          <input type="reset" />
          <input type="password" />
          <input type="button" />
          <select><option/></select>
          <textarea></textarea>
          <button></button>
        </form>
    </body>
</html>

定时弹出广告:

​ slideDown : 必须得指定宽度

​ show()

​ hide()

选择器

  • 基本选择器:
    • ID选择器 #
    • 类选择器 .
    • 元素选择器 元素的名称
    • 通配符选择器 *
    • 选择器选择器 选择器1, 选择器2
  • 层级选择器:
    • 后代选择器 : 选择器 选择器
    • 子元素选择器: 选择器1 > 选择器2
    • 相邻兄弟选择器: 选择器 + 选择器2
    • 找到全部兄弟选择器: 选择器1 ~选择器2
  • 属性选择器

使用JQ完成表格的隔行换色

需求分析:

在咱们的实际开发过程当中,咱们的表格若是全部的行都是同样的话,很容易看花眼,因此咱们须要让咱们的表格隔行换色

技术分析:

代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            //页面加载
            $(document).ready(function(){
    
    
                //获取表单
                $("tbody tr:odd").css("background-color","#FF0000");
                $("tbody tr:even").css("background-color","#FFF38F");
                $("tr").click(function(){
    
    
                    var $color = $(this).css("background-color");
                    var $this = $(this);
                    $(this).css("background-color","yellow");
                    $(this).click(function(){
    
    
                        $this.css("background-color",$color);
                    });
                });
                //表单的全选与全不选
                /*$("#ck1").click(function(){
                    var v = this.checked;
                    //alert(v);
                    $("input[name='ck2']").each(function(index,name){
                        //alert(this.checked);
                        this.checked = v;
                    });
                });*/
                $("#ck1").click(function(){
    
    
                    //检查id为#ck1是否被选中,选中为true,未选中为false
                    var flag = $(this).prop("checked");
                    $("input[name='ck2']").prop("checked",flag);
                });     
            });
        </script>
    </head>
    <body>
        <table id="table1" border="1px" width="700px" height="200px" align="center">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" id="ck1"/>
                    </td>
                    <th>
                        分类ID
                    </th>
                    <th>
                        分类名称
                    </th>
                    <th>
                        分类商品
                    </th>
                    <th>
                        分类描述
                    </th>
                    <th>
                        操做
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td>
                        <input onclick="checkAll()" type="checkbox" name="ck2" />
                    </td>
                    <td>
                        1
                    </td>
                    <td>
                        手机数码
                    </td>
                    <td>
                        三星NOTE7,IPhone7
                    </td>
                    <td>
                        这里面放的都是最新手机
                    </td>
                    <td>
                        <a href="#">修改</a>|
                        <a href="#">删除</a>
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <input onclick="checkAll()" type="checkbox" name="ck2" />
                    </td>
                    <td>
                        2
                    </td>
                    <td>
                        黄鹤楼,双喜,长白山,白沙
                    </td>
                    <td>
                        分类商品
                    </td>
                    <td>
                        这里面都是香烟
                    </td>
                    <td>
                        <a href="#">修改</a>|
                        <a href="#">删除</a>
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <input onclick="checkAll()" type="checkbox" name="ck2" />
                    </td>
                    <td>
                        3
                    </td>
                    <td>
                        电脑办公
                    </td>
                    <td>
                        MBP,联想
                    </td>
                    <td>
                        电脑
                    </td>
                    <td>
                        <a href="#">修改</a>|
                        <a href="#">删除</a>
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <input onclick="checkAll()" type="checkbox" name="ck2" />
                    </td>
                    <td>
                        4
                    </td>
                    <td>
                        冰箱洗衣机
                    </td>
                    <td>
                        海尔,格力,三菱,美的
                    </td>
                    <td>
                        冰箱洗衣机
                    </td>
                    <td>
                        <a href="#">修改</a>|
                        <a href="#">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

使用JQuery完成表单的全选全不选功能

需求分析

​ 在咱们对表格处理的时,有些状况下,咱们须要对表格进行批量处理,

技术分析:

​ 经过JQ来修改页面元素的属性, 演示代码以下

$(function(){
   
   
    $("#bt1").click(function(){
   
   
        // 得到属性的值
        // alert($("#img1").attr("src"));
        // 修改属性的值:
        $("#img1").attr("src","../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg");
    });
});

代码实现:

$(function(){
   
   
                /*
                 1. 肯定事件 onclick
                 2. 要操做的元素: 顶部全选按钮
                 3. 实现点击事件
                    * 获取当前选中的状态
                    * 使用过滤器,过滤出全部的checkbox
                    * 改变他们的状态
                 */
                $("#ckall").click(function(){
   
   
//                  var checked = $("#ckall").prop("checked");
                    var checked = this.checked;
//                  alert(checked);
                    $("tbody input[type='checkbox']").prop("checked",checked);
                })
            });

使用JQ完成省市联动效果

需求分析:

​ 在咱们的注册表单中,一般咱们须要知道用户的籍贯,须要一个给用选择的项,当用户选中了省份以后,列出省下面全部的城市

技术分析:

  • JQuery中的遍历:

    • 一种方法:
    JQ的对象.each(function(i,n){
         
         
    
    });
    • 第二种方法:
    $.each(数组,function(i,n){
         
         
    
    });
  • 如何使用JQ来添加元素

JQuery的DOM操做
    JQ中添加元素:
        append(); 添加字节点
        appendTo(); 将本身添加到

步骤分析:

  1. 定义一个二维数组,用来保存城市的信息
  2. 肯定事件 onchange事件
  3. 找到要操做的select
  4. 获取选中的城市
  5. 动态添加option节点到城市select中

代码实现:

var provinces = [
                ["武汉市","黄石市","随州市","荆门市"],
                ["长沙市","株洲市","邵阳市"],
                ["广州市","深圳市","东莞市","惠州市"]
            ];

$(function(){
   
   
    $("#selectProvince").change(function(){
   
   
    //alert(this.value);
    var cities = provinces[this.value];
    //                  $("#selectCity").empty();
    $("#selectCity")[0].options.length = 0;
    $(cities).each(function(i,n){
   
   
      $("#selectCity").append("<option>"+n+"</option>")
      });
    });
});

使用JQ完成下拉列表左右选择

需求分析

咱们的商品一般包含已经有了的, 还有没有的,如今咱们须要有一个页面用于动态编辑这些商品

技术分析

JQuery中的选择器使用,还有文档的增删

步骤分析

  1. 引入jquery文件
  2. 页面加载完成的事件
  3. 在连接上添加一个事件
  4. 使用append()函数将选中的option 添加子节点

代码实现

            $(function(){
   
   
                $("#clickOne").click(function(){
   
   
//                  var value = $("#selectLeft>option:selected").val();
                    $("#selectRight").append($("#selectLeft>option:selected"));
//                  $("#selectLeft>option:selected").appendTo("#selectRight");
                });

                $("#clickAll").click(function(){
   
   
                    $("#selectRight").append($("#selectLeft>option"));
                });
            });

使用JQ完成表单的校验

需求分析

在用户提交表单的时候, 咱们最好是可以在用户数据提交给服务器以前去作一次校验,防止服务器压力过大,而且须要给用户一个友好提示

技术分析

须要用到事件:

  • blur事件
  • focus事件
  • keyup事件
  • submit事件

步骤分析

  1. 为输入框添加blur事件
  2. 在blur事件触发的函数中,得到文本框
  3. 判断用户输入的值是否为空,若是为空,提示一下
  4. 添加submit事件
  5. 判断表单上的错误数量

代码实现

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="../css/style2.css" />
        <link rel="stylesheet" href="../css/main.css" />
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
    
    
                //给全部必填项添加一个小红点
                $("form .required").parent().append("<b class='high'>*<b>");
                //给全部的框添加一个blur事件
                $("form input").blur(function(){
    
    
                    var $parent = $(this).parent();

                    //移除原有的span
                    $parent.find(".formtips").remove();
                    //判断当前在处理的控件
                    if($(this).is("#username")){
                        if(this.value == ""){
                            //<span>用户名不能为空!</span>
                            $parent.append("<span class='formtips onError'>用户名不能为空!</span>");
                        }else{
                            //<span>用户名输入正确!</span>
                            $parent.append("<span class='formtips onSuccess' >用户名输入正确!</span>");
                        }
                    }
                    if($(this).is("#password")){
                        if(this.value == ""){
                            $parent.append("<span class='formtips onError'>密码不能为空!</span>");
                        }else{
                            $parent.append("<span class='formtips onSuccess' >密码输入正确!</span>");
                        }
                    }
                    // /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/
                    if($(this).is("#mail")){
                        if(/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(this.value)){
                            $parent.append("<span class='formtips onSuccess'>邮箱格式正确!</span>");
                        }else{
                            $parent.append("<span class='formtips onError' >邮箱格式不对!</span>");
                        }
                    }
                }).focus(function(){
    
    
                    $(this).triggerHandler("blur");
                }).keyup(function(){
    
    
                    $(this).triggerHandler("blur");
                });

                $("form").submit(function(){
    
    
                    $("form .required").trigger("focus");

                    //看看哪一行不为0
                    var length = $("form .onError").length
                    //alert(length);
                    if(length > 0){
                        return false;
                    }
                });

            });
        </script>
    </head>

    <body>
        <div>
            <div>
                <div class=top>
                    <img src="../img/logo2.png" />
                </div>
                <div class="top">
                    <img src="../img/header.png" />
                </div>
                <div class="top" style="padding-top: 20px; height:40px">
                    <a>登陆</a>
                    <a>注册</a>
                    <a>购物车</a>
                </div>
            </div>
            <!--定义一个空的div 用于<br />clear浮动-->
            <div class="clear"></div>
            <!--导航栏-->
            <div style="border: 1px black solid; background-color: black;height: 38px;font-size: 15px;color: white;width: 100%; ">
                <ul>
                    <li style="display: inline;">首页</li>
                    <li style="display: inline;">手机数码</li>
                    <li style="display: inline;">电脑办公</li>
                    <li style="display: inline;">鞋靴箱包</li>
                    <li style="display: inline;">洗漱用品</li>
                </ul>
            </div>
            <div style="background: url(../img/regist_bg.jpg); height: 500px;width: 100%;margin: 10px 0px;">
                <div style="border: 5px solid black;width:800px; height: 400px; background-color: white; position: absolute;top: 150px;left: 310px;">

                    <h3>用戶注册</h3>
                    <form action="../案例四:网站首页/index.html" method="get" enctype="application/x-www-form-urlencoded">
                        <table width="100%" height="100%" align="center">
                            <tr>
                                <td>用户名:</td>
                                <td><input type="text" id="username" class="required"/></td>
                            </tr>
                            <tr>
                                <td>密 码:</td>
                                <td><input type="password" id="password" class="required"/></td>
                            </tr>
                            <tr>
                                <td>确认密码:</td>
                                <td><input type="password" /></td>
                            </tr>
                            <tr>
                                <td>邮箱:</td>
                                <td><input type="text" class="required" id="mail"/></td>
                            </tr>
                            <tr>
                                <td>姓名:</td>
                                <td><input type="text" /></td>
                            </tr>
                            <tr>
                                <td>性别:</td>
                                <td><input type="radio" name="sex" /><input type="radio" name="sex" /></td>
                            </tr>
                            <tr>
                                <td>出生日期:</td>
                                <td><input type="text" /></td>
                            </tr>
                            <tr>
                                <td>验证码:</td>
                                <td><input type="text" /></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="submit" value="提交" style="background: url(../img/register.gif);" />
                                </td>
                            </tr>
                        </table>
                    </form>

                </div>
            </div>
            <!--信息栏-->
            <div>
                <img src="../img/footer.jpg" />
            </div>

            <div align="center">
                <a href="#">关于咱们</a>
                <a href="#">联系咱们</a>
                <a href="#">招贤纳士</a>
                <a href="#">法律声明</a>
                <a href="#">友情连接</a>
                <a href="#">支付方式</a>
                <a href="#">配送方式</a>
                <a href="#">服务声明</a>
                <a href="#">广告声明</a><br /> Copyright © 2005-2016 xx商城 版权全部
            </div>
        </div>
    </body>

</html>