Java小农养成记第三十三天

最新推荐文章于 2024-08-11 20:00:32 发布

舍得..

最新推荐文章于 2024-08-11 20:00:32 发布

阅读量558

点赞数

分类专栏： Java学习笔记文章标签： java javascript 前端

本文链接：https://blog.csdn.net/qq_45265623/article/details/122903004

版权

Java学习笔记专栏收录该内容

46 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中DOM的基本操作，包括通过id获取Element对象，修改属性和内容，以及DOM事件的绑定。同时涵盖了BOM的概念和Window对象的重要方法。通过实例演示了电灯开关、轮播图和表格动态操作等。

摘要由CSDN通过智能技术生成

day33

今日内容

JavaScript：
1. ECMAScript
2. BOM
3. DOM
  1. 事件

DOM简单学习：为了满足案例要求

功能：控制html文档的内容
代码：获取页面标签(元素)对象Element
- document.getElementById(“id值”);通过元素的id获取元素对象
操作Element对象：
1. 修改属性值：
  - 明确获取的对象是哪一个
  - 查看API文档，找其中有哪些属性可以设置
2. 修改标签体内容：
  - 属性：innerHTML
    1. 获取元素对象
    2. 使用innerHTML属性修改标签体内容

事件简单学习

功能：某些组件被执行被执行了某些操作后，触发某些代码的执行。
如何绑定事件：
1. 直接在html标签上，指定事件的属性（操作），属性值就是js代码
  1. 事件：onclick—单击事件
2. 通过js获取元素对象，指定事件属性，设置一个函数

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun() {
            alert("我被点了");
        }
    </script>
</head>
<body>
    <!--<img src="img/off.gif" οnclick="alert('我被点击了')">-->
    <img src="img/off.gif" onclick="fun()">
    <img src="img/off.gif" id="light">
</body>
<script>
    function fun1() {
        alert("我又被点了");
    }
    var light = document.getElementById("light");
    light.onclick = fun1;
</script>

案例–电灯开关

<body>
    <img id="light" src="img/off.gif">
</body>
<script>
    // 1.获取图片对象
    var light = document.getElementById("light");

    var flag = false;//false代表灯是灭的

    // 2.绑定单击事件
    light.onclick = function() {
        if (flag){
            light.src = "img/off.gif";
            flag = false;
        }else{
            light.src = "img/on.gif";
            flag = true;
        }
    }
</script>

BOM

概念：浏览器对象模型（Browser Object Model (BOM)
- 将浏览器的各个组成部分封装成对象
组成：
- Window 对象：窗口对象
- Navigator 对象：浏览器对象
- Screen 对象：显示器对象
- History 对象：历史记录对象
- Location 对象：地址栏对象

Window 对象：窗口对象

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            Window:窗口对象
                1.创建：

                2.方法：
                    1. 与弹出框有关的方法：
                        alert(message) 	显示带有一段消息和一个确认按钮的警告框。

                        confirm(message) 	显示带有一段消息以及确认按钮和取消按钮的对话框。
                            注意：如果访问者点击"确定"，此方法返回true，否则返回false。

                        prompt(msg,defaultText) 	显示可提示用户输入的对话框。
                            注意：
                                msg 	可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。
                                defaultText 	可选。默认的输入文本。
                                返回值是用户输入的字符串。

                    2. 与打开和关闭有关的方法
                        open(URL,name) 	打开一个新的浏览器窗口或查找一个已命名的窗口。
                            URL 	可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口
                            name 	可选。指定target属性或窗口的名称。支持以下值：
                                    _blank - URL加载到一个新的窗口。这是默认
                                    _parent - URL加载到父框架
                                    _self - URL替换当前页面
                                    _top - URL替换任何可加载的框架集
                                    name - 窗口名称
                            返回一个新的Window对象

                        close() 	关闭浏览器窗口。
                            注意：谁调用我，我就关谁

                    3.与定时器有关的方法
                        setTimeout(code/function, milliseconds, param1, param2, ...) 	在指定的毫秒数后调用函数或计算表达式。一次性的定时器
                            code/function 	必需。要调用一个代码串，也可以是一个函数。
                            milliseconds 	可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。
                            param1, param2, ... 	可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。
                            返回值: 	返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行。

                        clearTimeout(id_of_settimeout) 	取消由 setTimeout() 方法设置的 timeout。
                            id_of_settimeout	调用 setTimeout() 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout() 所设定的定时执行操作。

                        setInterval(code/function, milliseconds, param1, param2, ...) 	按照指定的周期（以毫秒计）来调用函数或计算表达式。
                        clearInterval(id_of_setinterval) 	取消由 setInterval() 设置的 timeout。

                3.属性：
                    1. 获取其他BOM对象：
                        history 对 History 对象的只读引用
                        location 用于窗口或框架的 Location 对象
                        navigator 对 Navigator 对象的只读引用
                        screen 对 Screen 对象的只读引用
                    2. 获取DOM对象：
                        document 对 Document 对象的只读引用
                4.特点：
                    * Window对象不需要创建可以直接使用，window.方法名();
                    * window应用可以省略, 方法名();
         */
        /*
        alert("Hello window");
        window.alert("hello");
        */
        /*
        var flag = confirm("你确定要退出吗?");
        if (flag){
            //退出操作
            alert("欢迎再次光临！");
        }else{
            alert("手别抖");
        }
        */
        //输入框
        /*
        var result = prompt("请输入用户名");
        document.write(result);
        */
    </script>
</head>
<body>
    <input type="button" id="openBtn" value="打开一个页面">
    <input type="button" id="closeBtn" value="关闭一个页面">
</body>
<script>

    var openBtn = document.getElementById("openBtn");
    var newWindow;
    openBtn.onclick = function () {
        newWindow = open("https://www.baidu.com");
    }

    var closeBtn = document.getElementById("closeBtn");
    closeBtn.onclick = function () {
        newWindow.close();
    }

    //一次性定时器
    // setTimeout("alert('boom~~');", 3000);
    // setTimeout("fun()", 3000); //fun()代码片段
    // var id = setTimeout(fun, 3000);//fun对象，函数既是对象
    // clearTimeout(id);
    function fun(){
        alert('boom~~');

    }

    //循环定时器
    var id = setInterval(fun,2000);
    clearInterval(id);
</script>

Location 对象：地址栏对象

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            Location：地址栏对象
                1. 创建（获取）：
                    window.location
                    location

                2. 方法：
                    reload() 	重新载入当前文档（刷新）

                3.属性：
                    href 	可设置或返回当前显示的文档的完整 URL
        */
    </script>
</head>
<body>
    <input type="button" id="btn" value="刷新">
    <input type="button" id="goItcast" value="去传智播客">
</body>
<script>

    var btn = document.getElementById("btn");
    btn.onclick = function(){
        //刷新页面
        location.reload();
    }

    //获取href
    //var href = location.href;
    //alert(href);

    //点击按钮，去访问www.itcast.cn官网
    var goItcast = document.getElementById("goItcast");
    goItcast.onclick = function(){
        location.href = "https://www.itcast.cn";
    }
</script>

History：历史记录对象

    1. 创建(获取)：
        1. window.history
        2. history

    2. 方法：
        * back()	加载 history 列表中的前一个 URL。
        * forward()	加载 history 列表中的下一个 URL。
        * go(参数)	加载 history 列表中的某个具体页面。
            * 参数：
                * 正数：前进几个历史记录
                * 负数：后退几个历史记录
    3. 属性：
        * length	返回当前窗口历史列表中的 URL 数量。

案例2–轮播图

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <img src="img/banner_1.jpg" width="100%" id="banner">
</body>
<script>
    //1.在页面上使用img标签展示图片
    var banner = document.getElementById("banner");
    var number = 1;
    //2.定义一个方法，修改图片对象的src属性
    function fun(){
        number++;
        if (number > 3) number = 1;
        banner.src = "img/banner_" + number + ".jpg";
    }
    //3.定义一个定时器，每隔3秒调用方法一次
    setInterval(fun, 3000);
</script>

案例3–自动跳转

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
    <style>
        p{
            text-align: center;
        }
        #time{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        <span id="time">5</span>秒之后，自动跳转到首页……
    </p>
</body>
<script>
    var time = document.getElementById("time");
    var second = 5;
    function showTime() {
        second --;
        if (second <= 0){
            location.href = "https://www.baidu.com";
        }
        time.innerText = second + "";

    }
    //设置定时器，1秒执行一次该方法
    setInterval(showTime, 1000);

</script>
</html>

DOM

概念：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
- 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
W3C DOM 标准被分为 3 个不同的部分：
- Core(核心) DOM - 所有文档类型的标准模型
  - Document：文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
  - Node：节点对象，其他5个的父对象
- XML DOM - XML 文档的标准模型
- HTML DOM - HTML 文档的标准模型

核心DOM模型：

Document：文档对象

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            Document:文档对象
                1.创建（获取）：在html dom模型中可以使用window对象来获取
                    1. window.document
                    2. document
                2.方法：
                    1.获取Element对象：
                        getElementById()	根据id属性值获取元素对象，id属性值一般唯一
                        getElementsByTagName()	根据元素名称获取元素对象们，返回值是一个数组
                        getElementsByClassName() 根据class属性值获取元素对象们，返回值是一个数组
                        getElementsByName() 根据name属性值获取元素对象们，返回值是一个数组
                    2.创建其他DOM对象：
                        createAttribute(name) 创建拥有指定名称和命名空间的属性节点，并返回新的 Attr 对象。
                        createComment() 创建注释节点。
                        createElement() 创建元素节点。
                        createTextNode() 创建文本节点。
                 3. 属性
         */
    </script>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>

    <div class="cls1">div4</div>
    <div class="cls1">div5</div>

    <input type="text" name="username">
    <br>
</body>
<script>
    var divs = document.getElementsByTagName("div");
    document.write(divs.length + "<br>");

    var div_cls = document.getElementsByClassName("cls1");
    document.write(div_cls.length + "<br>");

    var div_name = document.getElementsByName("username");
    document.write(div_name.length + "<br>");

    var table = document.createElement("table");
    alert(table);
</script>
</html>

Element：元素对象

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            Element:元素对象
                1.获取/创建：通过document来获取和创建
                2.方法：
                    1.removeAttribute() 删除属性
                    2.setAttribute() 设置属性
        */
    </script>
</head>
<body>
    <a>点我试一试</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">
</body>
<script>

    var btn_set = document.getElementById("btn_set");
    btn_set.onclick = function () {
        //给标签设置属性

        var element_a = document.getElementsByTagName("a")[0];
        //element_a.href = "https://www.baidu.com";
        element_a.setAttribute("href","https://www.baidu.com");
    }

    var btn_remove = document.getElementById("btn_remove");
    btn_remove.onclick = function () {
        var element_a = document.getElementsByTagName("a")[0];
        element_a.removeAttribute("href");
    }
</script>
</html>

Node：节点对象，其他5个的父对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            Node：节点对象
                1. 特点：所有dom对象都可以被认为是一个节点
                2.方法：
                    * CRUD dom树：
                        appendChild(newchild)	向节点的子节点列表的结尾添加新的子节点。
                            newchild	所添加的节点
                        removeChild(node)	删除（并返回）当前节点的指定子节点。
                            node	必需。指定需要删除的节点。
                        replaceChild(new_node,old_node)	用新节点替换一个子节点。
                            new_node	必需。指定新的节点。
                            old_node	必需。指定被替换的节点。
                3.属性：
                    parentNode	返回节点的父节点。

         */
    </script>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            width: 400px;
            height: 400px;
        }
        #div2{
            width: 200px;
            height: 200px;
        }
        #div3{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
    <!--<input type="button" id="del" value="删除子节点"></input>-->
</body>
<script>
    //删除子节点
    var element_a = document.getElementById("del");
    element_a.onclick = function () {
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }

    //添加子节点
    var element_b = document.getElementById("add");
    element_b.onclick = function () {
        var div1 = document.getElementById("div1");
        //创建div节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");
        div1.appendChild(div3);
    }

    /*
        超链接功能：
            1.可以被点击，
            2.点击后跳转到href指定url
        需求：保留1功能，去掉2功能
        实现：href="javascript:void(0);"
     */
    var div2 = document.getElementById("div2");
    var div1 = div2.parentNode;
    alert(div1);
</script>
</html>

案例4–动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="del(this);">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="del(this);">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="del(this);">删除</a></td>
    </tr>


</table>
<script>
    /*
        添加
            1、给添加按钮绑定单击事件
            2、获取文本框的内容
            3、创建td。设置td的文本为文本框的内容。
            4。创建tr
            5、将td添加到tr中
            6、获取table。将tr添加到table中
    */
    var btn_add = document.getElementById("btn_add");
    btn_add.onclick = function () {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        var td_id = document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);

        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);

        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);

        var td_a = document.createElement("td");
        var a =document.createElement("a");
        a.setAttribute("href", "javascript:void(0);");
        a.setAttribute("onclick", "del(this);");
        a.innerText = "删除";
        td_a.appendChild(a);


        var tr = document.createElement("tr");
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);

        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
    }
	//使用innerHTML添加
    btn_add.onclick = function () {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        var table = document.getElementsByTagName("table")[0];
        //追加一行
        table.innerHTML += "<tr>\n" +
                "        <td>" + id + "</td>\n" +
                "        <td>" + name + "</td>\n" +
                "        <td>" + gender + "</td>\n" +
                "        <td><a href=\"javascript:void(0);\" οnclick=\"del(this);\">删除</a></td>\n" +
                "</tr>";
        }
    //删除方法
    function del(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;

        table.removeChild(tr);
    }

</script>
</body>
</html>

HTML DOM

标签体的设置和获取：innerHTML

<body>
    <div id="div1">
        div
    </div>
</body>
<script>
    var div = document.getElementById("div1");
    var innerHTML = div.innerText;
    //alert(innerHTML);
    // div标签中替换一个文本输入框
    // div.innerHTML = "<input type='text'>";
    // div标签中追加一个文本输入框
    div.innerHTML += "<input type='text'>";
</script>

使用html元素对象的属性
控制样式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .d2{
            border: 1px solid blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="div1">
        div
    </div>
    <div id="div2">
        div
    </div>
</body>
<script>
    /*
        控制元素样式：
            1. 使用元素的style属性来设置
            2. 提前定义号类选择器的样式，通过元素的className属性来设置其class属性值。
     */
    var div1 = document.getElementById("div1");
    div1.onclick = function () {
        div1.style.border = "1px solid red";
        div1.style.width = "200px";
        //font-size --> fontSize
        div1.style.fontSize = "20px";
    }

    var div2 = document.getElementById("div2");

    div2.onclick = function(){
        div2.className = "d1";
    }

</script>
</html>

事件监听机制

概念：某些组件被执行了某些操作后，触发某些代码的执行。
- 事件：某些操作，如：单击，双击，键盘按下，鼠标移动了
- 事件源：组件。如：按钮、文本输入框……
- 监听器：代码。
- 注册监听：将事件、事件源、监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
常见事件：
1. 点击事件：
  - onclick：当用户单击元素时发生此事件。
  - ondblclick：当用户双击元素时发生此事件。
2. 焦点事件：
  - onblur：当元素失去焦点时发生此事件。
    - 一般用于表单校验
  - onfocus：在元素获得焦点时发生此事件。
3. 加载事件：
  - onload：在对象被加载后发生此事件。
4. 鼠标事件：
  - onmousedown：当用户在元素上按下鼠标按钮时，发生此事件。
  - 定义方法时，定义一个形参，接受event对象
    - event对象的button属性返回触发鼠标事件时按下的鼠标按钮。
      - 0：鼠标左键
      - 1：滚轮按钮或中间按钮（如果有）
      - 2：鼠标右键
  - onmouseenter：当鼠标指针移动到元素上时，发生此事件。
  - onmouseleave：当鼠标指针从元素上移出时，发生此事件。
  - onmousemove：当鼠标指针在元素上方移动时，发生此事件。
  - onmouseout：当用户将鼠标指针移出元素或其中的子元素时，发生此事件。
  - onmouseover：当鼠标指针移动到元素或其中的子元素上时，发生此事件。
  - onmouseup：当用户在元素上释放鼠标按钮时，发生此事件。
5. 键盘事件：
  - onkeydown：当用户正在按下键时，发生此事件。
  - onkeypress：当用户按下键时，发生此事件
  - onkeyup：当用户松开键时，发生此事件。
6. 选中和改变
  - onchange：当form元素的内容、选择的内容或选中的状态发生改变时，发生此事件
  - onselect：用户选择文本后（对于<input>和<textarea>）发生此事件
7. 表单事件：
  - onsubmit：在提交表单时发生此事件。
    - 用于校验表单内容，如果不符合则返回false,不提交表单,符合则返回true，提交表单
  - onreset：重置表单时发生此事件。

案例5–表格全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
        .out{
            background: white;
        }
        .over{
            background: pink;
        }
    </style>

    

</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstcb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
<script>
    //1.在页面加载完后绑定事件
    window.onload =function () {
        //2.给全选按钮绑定单击事件
        document.getElementById("selectAll").onclick = function () {
            //获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++){
                //设置每一个cb的状态为选中，checked
                cbs[i].checked = true;
            }
        }
        document.getElementById("unSelectAll").onclick = function () {
            //获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++){
                //设置每一个cb的状态为未选中，checked
                cbs[i].checked = false;
            }
        }
        document.getElementById("selectRev").onclick = function () {
            //获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++){
                //设置每一个cb的状态为未选中，checked
                cbs[i].checked = !cbs[i].checked;
            }
        }
        document.getElementById("firstcb").onclick = function () {
            //获取第一个cb点击this

            //获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++){
                //设置每一个cb的状态为未选中，checked
                cbs[i].checked = this.checked;
            }
        }
        //给所有tr绑定鼠标移到元素之上和移出元素之上事件
        var trs = document.getElementsByTagName("tr");
        for (var i = 0; i < trs.length; i++){
            //移到元素之上
            trs[i].onmouseover = function () {
                this.className = "over";
            }
            //移出元素
            trs[i].onmouseout = function(){
                this.className = "out";
            }
        }
    }
</script>
</html>

案例6–注册页面(js)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/11_案例2_注册页面(css).css">
</head>
<script>
    /*
    分析;
        1.给表单绑定onsubmit事性。监听器中判断每一个方法校验的结果。
            如果都为true。则监听器万法返回true
            如果有一个为false，则监听器方法返回false

        2.定义一些方法分别校验各个表单项。
        3.给各个表单项绑定onblur事件。

     */
    window.onload = function () {
        //给表单绑定onsubmit事性
        document.getElementById("form").onsubmit = function () {
            return checkUserName() && checkPassword();
        }
        //给用户名和密码框分别绑定离焦事件
        document.getElementById("username").onblur = checkUserName;
        document.getElementById("password").onblur = checkPassword;
        //校验用户名
        function checkUserName(){
            var username = document.getElementById("username").value;
            var reg_username = /^\w{6,12}$/;
            var flag = reg_username.test(username);
            var s_username = document.getElementById("s_username");
            if (flag){
                s_username.innerHTML = "<img width='35px' height='25px' src='img/gou.png'>"
            }else{
                s_username.innerHTML ="用户名格式有误"
            }
            return flag;
        }
        //校验密码
        function checkPassword(){
            var password = document.getElementById("password").value;
            var reg_password = /^\w{6,12}$/;
            var flag = reg_password.test(password);
            var s_password = document.getElementById("s_password");
            if (flag){
                s_password.innerHTML = "<img width='35px' height='25px' src='img/gou.png'>"
            }else{
                s_password.innerHTML ="密码有误"
            }
            return flag;
        }
    }
</script>
<body>
    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="rg_center">
            <!--定义表单form-->
            <form action="#" id="form" method="get">
                <table border="0" align="center" width="550px">
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入email"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name=gender value="male">男
                            <input type="radio" name=gender value="female">女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right">
                            <input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" id="td_btn">
                            <input type="submit" value="注册" id="btn_sub">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="rg_right">
            <p>已有账户?<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
</html>