03_2_JavaScript高级

最新推荐文章于 2024-04-08 19:54:27 发布

惨猴

最新推荐文章于 2024-04-08 19:54:27 发布

阅读量222

点赞数

分类专栏： HeimaJavaWeb 文章标签： Java

本文链接：https://blog.csdn.net/qq_37696899/article/details/103645010

版权

HeimaJavaWeb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

DOM简单学习

* 功能：控制html文档的内容
* 获取页面标签(元素)对象：Element
	* document.getElementById("id值"):通过元素的id获取元素对象

* 操作Element对象：
	1. 修改属性值：
		1. 明确获取的对象是哪一个？
		2. 查看API文档，找其中有哪些属性可以设置
	2. 修改标签体内容：
		* 属性：innerHTML
		1. 获取元素对象
		2. 使用innerHTML属性修改标签体内容

DOM获取元素对象

<script>
    //通过id获取元素对象
    var light = document.getElementById("light")
    alert("我要换图片了")
    light.src = "../day02_html&&css/image/banner_2.jpg"


    //1.获取h1标签对象
    var title = document.getElementById("title")
    alert("我要换内容了")
    //2.修改内容
    title.innerHTML = "不识妻美刘强东"

</script>

事件绑定

<script>
    /*
    * 如何绑定事件
    *   1.直接在html标签上,指定事件的属性(操作),属性值就是js代码
    *       事件:onclick---单击事件
    *
    *   2.通过js获取元素对象,指定事件属性,设置一个函数
    *
    *
    *
    * */
    //1
    function fun() {
        alert('我被点了')
    }

    //2获取light2对象
    var light2 = document.getElementById("light2")
    //绑定事件
    function fun2(){
        alert("再老点我");
        light2.src="img/on.gif"
    }
    light2.onclick = fun2;



</script>

小练习(电灯开关)

<body>


<img id="light" src="img/off.gif">

<script>
	    /*
	        分析：
	            1.获取图片对象
	            2.绑定单击事件
	            3.每次点击切换图片
	                * 规则：
	                    * 如果灯是开的 on,切换图片为 off
	                    * 如果灯是关的 off,切换图片为 on
	                * 使用标记flag来完成
	
	     */
	
	    //1.获取图片对象
    var light = document.getElementById("light");
    var flag = false;
    light.onclick = function f() {
        if (flag) {
            light.src = "img/off.gif";
            flag = false;
        } else {
            light.src = "img/on.gif";
            flag = true;
        }
    };
</script>

</body>

BOM:

1. 概念：Browser Object Model 浏览器对象模型
	* 将浏览器的各个组成部分封装成对象。

2. 组成：
	* Window：窗口对象
	* Navigator：浏览器对象
	* Screen：显示器屏幕对象
	* History：历史记录对象
	* Location：地址栏对象

3. Window：窗口对象
    1. 创建
    2. 方法
         1. 与弹出框有关的方法：
            alert()	显示带有一段消息和一个确认按钮的警告框。
            confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
                * 如果用户点击确定按钮，则方法返回true
                * 如果用户点击取消按钮，则方法返回false
            prompt()	显示可提示用户输入的对话框。
                * 返回值：获取用户输入的值
         2. 与打开关闭有关的方法：
            close()	关闭浏览器窗口。
                * 谁调用我 ，我关谁
            open()	打开一个新的浏览器窗口
                * 返回新的Window对象
         3. 与定时器有关的方式
            setTimeout()	在指定的毫秒数后调用函数或计算表达式。
                * 参数：
                    1. js代码或者方法对象
                    2. 毫秒值
                * 返回值：唯一标识，用于取消定时器
            clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

            setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
            clearInterval()	取消由 setInterval() 设置的 timeout。

    3. 属性：
        1. 获取其他BOM对象：
            history
            location
            Navigator
            Screen:
        2. 获取DOM对象
            document
    4. 特点
        * Window对象不需要创建可以直接使用 window使用。 window.方法名();
        * window引用可以省略。  方法名();
4. Location：地址栏对象
	1. 创建(获取)：
		1. window.location
		2. location

	2. 方法：
		* reload()	重新加载当前文档。刷新
	3. 属性
		* href	设置或返回完整的 URL。
5. History：历史记录对象
    1. 创建(获取)：
        1. window.history
        2. history

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

Window对象:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        *Window:窗口对象
        *
        *   1.创建
        *   2.方法
        *       1.与弹出框有关的方法:
        *           alert() 显示带有一段消息和确认按钮的警告框
    *               confirm()  显示带有一段消息以及确认按钮和取消按钮的对话框
*                       如果用户点击确定按钮,方法返回true
*                                  取消            false
    *               prompt()  显示可提示用户输入的对话框
*                       获取用户输入的值
*               2.与打开关闭有关的方法
*                   close()  关闭浏览器窗口
*                       谁调用我,我关谁
*                   open()    打开一个新的浏览器窗口
*                       返回一个新的window对象
*               3.与定时器有关的方法
*                   setTimeout()   在指定的毫秒数后调用函数或计算表达式
*                       参数有两个:
*                           1.js代码或者方法对象
*                           2.毫秒值
*                           3.返回值,返回唯一编号
*                   clearTimeout()  取消有setTimeout()方法设置的timeout
*
*                   setInterval()   按照指定的周期来调用函数
*                   clearInterval()  取消
*
        *   3.属性
        *       1.获取其他BOM对象,
        *           history
        *           location
        *           Navigator
        *           Screen
        *       2.获取DOM对象
        *           document
        *   4.特点
        *       window对象不需要创建可以直接使用,window.方法名()
        *       window引用可以省略   方法名()
        **/

        // alert("hello window")
        // window.alert("hello a")
        // var flag = confirm("您确定要退出吗")
        // if(flag){
        //     //退出
        //     alert("欢迎再次光临")
        // }else{
        //     alert("手别抖")
        // }

        // //输入框
        // var username = prompt("请输入用户名")
        // alert(username)


        //一次性的定时器
        // var id = setTimeout(f,3000)
        // clearTimeout(id);
        // function f() {
        //     alert('fdsf');
        // }
        //
        // //循环定时器
        // var id = setInterval(f,2000)
        //
        // //取消定时器
        // clearInterval(id)
        //获取history
        var h1 = history;

    </script>
</head>
<body>
<input type="button" value="打开" id="openBtn">
<input type="button" value="关闭" id="closeBtn">
<script>
    var openBtn = document.getElementById("openBtn")
    var newWindow;
    openBtn.onclick = function () {
        //打开新窗口
        newWindow = open("http://www.baidu.com")
    }

    var closeBtn = document.getElementById("closeBtn");
    closeBtn.onclick = function () {
        newWindow.close();
    }
</script>
</body>
</html>

案例:轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        * 分析
        *   1.在页面上使用img标签展示图片
        *   2.定义一个方法,修改图片对象的连接src
        *   3.定义一个定时器,每隔3秒去调用方法一次
        *
        * */

    </script>
</head>
<body>
<img src="img/banner_1.jpg" width="100%" id="img">
<script>
    var number = 1;
    function f() {
        number++;
        if(number>3){
            number = 1;
        }
        var img = document.getElementById("img");
        img.src="img/banner_"+number+".jpg";
    }

    setInterval(f,3000);
</script>

</body>
</html>

Location对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //reload()方法,定义一个按钮,点击按钮,刷新当前页面

    </script>

</head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="go" value="去传智">
<script>
    var btn = document.getElementById("btn")

    btn.onclick = f1;

    function f1() {
        location.reload();
    }

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

    var go = document.getElementById("go")

    go.onclick = f2;

    function f2() {
        location.href = "http://www.itcast.cn";
    }

</script>

</body>
</html>

案例:自动跳转页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            text-align: center;
        }
        #time{
            color: red;
        }
    </style>
    <script>
        /*
        *分析:
        *   1.显示页面效果
        *   2.倒计时读秒
        *       2.1 定义一个方法,获取span标签,修改span内容
        *       2.2 定义一个定时器,一秒执行一次该方法
        *
        *
        *
        *
        * */
    </script>
</head>
<body>
<p>
    <span id="time">5</span>秒后,自动跳转到首页....
</p>
<script>
    var second = 5;
    var time = document.getElementById("time")
    function g() {
        second--;
        time.innerHTML = second+"";
        if (second==0){
            location.href="http://www.baidu.com"
        }
    }

    //设置定时器
    setInterval(g,1000);
</script>
</body>
</html>

History对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="获取历史记录">
<input type="button" id="forward" value="前进">
<a href="09_History对象2.html">09页面</a>

<script>
    /*
    * History:历史记录对象
    *   1.创建
    *       window.history
    *   2.方法
    *       back()   加载history列表中的前一个url
    *       forward()  加载history列表中的下一个url
    *       go()   加载history列表中的某个具体页面
    *   3.属性
    *       length  返回当前窗口历史列表中的url数量
    *
    * */
    //1.获取
    var btn = document.getElementById("btn")
    btn.onclick=function () {
        var length = history.length
        alert(length)
    }

    //
    var forward = document.getElementById("forward")
    forward.onclick=function () {
        // history.forward()
        history.go(-2)
    }
</script>

</body>
</html>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>



</head>
<body>

    <img id="img" src="img/banner_1.jpg" width="100%">
    <input type="button" id="back" value="后退">
    <script>
        /*
            分析：
                1.在页面上使用img标签展示图片
                2.定义一个方法，修改图片对象的src属性
                3.定义一个定时器，每隔3秒调用方法一次。


         */


        //修改图片src属性
        var number = 1;
        function fun(){
            number ++ ;
            //判断number是否大于3
            if(number > 3){
                number = 1;
            }
            //获取img对象
            var img = document.getElementById("img");
            img.src = "img/banner_"+number+".jpg";
        }

        //2.定义定时器
        setInterval(fun,3000);


        //1.获取按钮
        var back = document.getElementById("back");
        //2.绑定单机事件
        back.onclick = function(){
            //后退
           // history.back();
            history.go(-1);
        }

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

Document对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>
    
</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">

<script>
    /*
    Document：文档对象
        1. 创建(获取)：在html dom模型中可以使用window对象来获取
            1. window.document
            2. document
        2. 方法：
            1. 获取Element对象：
                1. getElementById()	： 根据id属性值获取元素对象。id属性值一般唯一
                2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
                3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
                4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
            2. 创建其他DOM对象：
                createAttribute(name)
                createComment()
                createElement()
                createTextNode()
        3. 属性



     */

    //2.根据元素名称获取元素对象们。返回值是一个数组
    var divs = document.getElementsByTagName("div");
    //alert(divs.length);
    //3.根据Class属性值获取元素对象们。返回值是一个数组
    var div_cls = document.getElementsByClassName("cls1");
   // alert(div_cls.length);
    //4.根据name属性值获取元素对象们。返回值是一个数组
    var ele_username = document.getElementsByName("username");
    //alert(ele_username.length);

    var table = document.createElement("table");
    alert(table);


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

Element对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element对象</title>
</head>
<body>
    <a>点我试一试</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">

<script>
    //获取btn
    var btn_set =document.getElementById("btn_set");
    btn_set.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.setAttribute("href","https://www.baidu.com");
    }


    //获取btn
    var btn_remove =document.getElementById("btn_remove");
    btn_remove.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.removeAttribute("href");
    }


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

Node对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;

        }
        #div1{
            width:200px;
            height: 200px;
        }
        #div2{
            width:100px;
            height: 100px;
        }
        #div3{
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">div2</div>
    div1
</div>
<a id="del" href="javascript:void(0)">删除div的子节点</a>
<a id="add" href="javascript:void(0)">添加div的子节点</a>
<!--<input type="button" id="del" value="删除子节点">-->
<script>
    //获取超链接
    var element = document.getElementById("del")
    //绑定单击事件
    element.onclick=function () {
        var div1 = document.getElementById("div1")
        var div2 = document.getElementById("div2")
        div1.removeChild(div2)

    }


    //获取超链接
    var element_add = document.getElementById("add")
    //绑定单击事件
    element_add.onclick=function () {
        var div1 = document.getElementById("div1")
        //给div1添加子节点
        //创建节点
        var div3 = document.createElement("div")
        div3.setAttribute("id","div3")

        div1.appendChild(div3)
    }

    /*
    * 超链接功能:
    *   超链接可以被点击
    *   点击后跳转到href指定的url
    * 保留点击功能,去掉跳转功能
    *
    * 实现:
    *   href="javascript:void(0)"
    *
    * */

    var div2 = document.getElementById("div2")
    var div1 = div2.parentNode;
    alert(div1)
</script>
</body>
</html>

案例:动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        body {
            text-align: center;
        }

        #out {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            text-align: center;

        }

        #in {
            width: 500px;
            height: 100px;
            margin: auto;
        }

        input {
            width: 100px;
            height: 20px;
            border: 1px solid gray;
            /*
                设置边框圆角
            */
            border-radius: 50px;
            padding-left: 20px;
        }

        #tab {
            width: 500px;
            height: 500px;
            margin: auto;
            text-align: center;
        }

        table {
            margin: auto;
            margin-top: 20px;
        }

        td, th {
            width: 100px;
        }
    </style>
</head>
<body>
<div id="out">
    <div id="in">
        <form style="margin-top: 40px">
            <input type="text" name="bianhao" id="bianhao" placeholder="111111">
            <input type="text" name="xingming" id="xingming">
            <input type="text" name="xingbie" id="xingbie">
            <input type="button" value="添加" id="btn">
        </form>
    </div>
    <div id="tab">
        <table border="1px" cellspacing="0" cellpadding="0" id="table">
            <caption>学生信息表</caption>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr id="tr">
                <td>1</td>
                <td>令狐冲</td>
                <td>男</td>
                <td id="td"><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td>
            </tr>
        </table>
    </div>
</div>
<script>

    //1.获取按钮
    document.getElementById("btn").onclick = function () {
        //2.获取文本框的内容
        var id = document.getElementById("bianhao").value;
        var name = document.getElementById("xingming").value;
        var gender = document.getElementById("xingbie").value;
        //3.创建td,赋值td的标签体内容
        var table = document.getElementById("table");
        table.innerHTML += "            <tr id=\"tr\">\n" +
            "                <td>"+id+"</td>\n" +
            "                <td>"+name+"</td>\n" +
            "                <td>"+gender+"</td>\n" +
            "                <td id=\"td\"><a href=\"javascript:void(0)\" onclick=\"delTr(this);\">删除</a></td>\n" +
            "            </tr>";
    };

    /*
    * 删除:
    *   1.确定点击的是哪一个超链接
    *   2.怎么删除
    *       removeChild():通过父节点,删除子节点
    * */
    //删除方法
    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode
        var tr = obj.parentNode.parentNode
        table.removeChild(tr)


    }

</script>

</body>
</html>

HTMLDOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">
    div
</div>
<script>
    var div = document.getElementById("div1")
    var innerHTML = div.innerHTML;
    //替换
    div.innerHTML = "<input type='text'>"
    //追加
    div.innerHTML += "<input type='text'>"
</script>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .d1{
             width: 13px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="div1">
    div
</div>
<div id="div2">
    div
</div>
<script>
    var div1 = document.getElementById("div1")
    div1.onclick = function () {
        //修改样式方式1
        div1.style.border = "1px solid red"
        div1.style.width = "200px"

        //font-size -->fontSize
        div1.style.fontSize="11px";
    }

    var div2 = document.getElementById("div2")
    div2.onclick = function () {
        div2.className = "d1"

    }
</script>


</body>
</html>

常见事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1失去焦点
        // var ins = document.getElementById("username")
        // ins.onblur=function () {
        //     alert("fd")
        // }

        //2加载完成事件
        window.onload = function () {
            //失去焦点
            // var ins = document.getElementById("username")
            // ins.onblur=function () {
            //     alert("fd")
            // }
            // //3.绑定鼠标事件
            // document.getElementById("username").onmouseover = function () {
            //     alert("fds")
            //
            // }
            // //4.绑定鼠标事件
            // document.getElementById("username").onmousedown = function () {
            //     alert("ddd")
            //
            // }
            // //5.绑定鼠标事件
            // document.getElementById("username").onmouseup = function (event) {
            //     alert(event.button)
            //
            // }
            //5.绑定鼠标事件
            // document.getElementById("username").onkeydown = function (event) {
            //     alert(event.keyCode)
            //     if(event.keyCode==13){
            //         alert("提交表单")
            //     }
            // }
            //5.绑定鼠标事件
            document.getElementById("username").onchange = function (event) {
                alert("ff")
            }
            document.getElementById("city").onchange = function () {
                alert("ff")
            }
            document.getElementById("form").onsubmit = function () {
                //校验用户名格式是否正确
                var flag = false;
                return flag;
            }

            function checkForm() {
                return false;
            }
        }

    </script>
</head>
<body>
<form action="#" method="get" id="form" onclick="return checkForm();">
    <input type="text" id="username">
    <select id="city">
        <option>
            --请选择--
        </option>
        <option>
            北京
        </option>
        <option>
            上海
        </option>
    </select>
    <input type="submit" value="tijiao">
</form>


</body>
</html>

案例:表格全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid red;
            width: 500px;
            margin-left: 30%;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
        .out {
            background-color: white;
        }
        .over{
            background-color: pink;
        }
    </style>
    <script>
        //1.在页面加载完后绑定事件
        window.onload = function () {
            //2.给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function () {
                //3.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //4.遍历cb,设置每一个cb的状态为选中
                //checked
                for(var i=0;i<cbs.length;i++){
                    cbs[i].checked = true;
                }
            }

            //2.给全选按钮绑定单击事件
            document.getElementById("unSelectAll").onclick = function () {
                //3.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //4.遍历cb,设置每一个cb的状态为选中
                //checked
                for(var i=0;i<cbs.length;i++){
                    cbs[i].checked = false;
                }
            }

            //2.给全选按钮绑定单击事件
            document.getElementById("selectRev").onclick = function () {
                //3.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //4.遍历cb,设置每一个cb的状态为选中
                //checked
                for(var i=0;i<cbs.length;i++){
                    cbs[i].checked = !cbs[i].checked
                }
            }

            //2.给全选按钮绑定单击事件
            document.getElementById("firstCb").onclick = function () {
                //3.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //4.遍历cb,设置每一个cb的状态为选中
                //checked
                for(var i=0;i<cbs.length;i++){
                    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>
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="0" id="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)" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td>
    </tr>
    <div>
        <input type="button" id="selectAll" value="全选">
        <input type="button" id="unSelectAll" value="全不选">
        <input type="button" id="selectRev" value="反选">
    </div>
</table>
</body>
</html>

案例:表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        background: url("img/register_bg.png") no-repeat center;
    }

    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }

    .rg_layout {
        width: 1000px;
        height: 650px;
        margin: auto;
        border: 8px solid #EEEEEE;
        background-color: white;
        padding-top: 30px;
        margin-top: 40px;
        box-sizing: border-box;
    }


    .rg_left {
        float: left;
        margin-left: 20px;
        margin-top: -10px;
    }

    .rg_left > p:first-child {
        color: #FFD026;
        font-size: 20px;
    }

    .rg_left > p:last-child {
        color: #A6A6A6;
        font-size: 20px;
    }

    .rg_center {
        margin-left: 60px;
        float: left;
        margin-left: 130px;
        margin-top: 50px;
    }

    .rg_right {
        margin-right: 10px;
        margin-top: -10px;
        float: right;
    }

    .rg_right > p {
        font-size: 15px;
    }

    .rg_right > p > a {
        color: pink;
    }

    .td_left {
        width: 100px;
        text-align: left;
        height: 45px;
    }

    #username, #password, #email, #name, #phone, #birthday, #img {
        width: 251px;
        height: 32px;
        border: 1px solid gray;
        /*
            设置边框圆角
        */
        border-radius: 5px;
        padding-left: 5px;
    }

    #img {
        width: 120px;
    }

    #img_check {
        height: 32px;
        vertical-align: middle;
    }

    #btn_sub {
        width: 150px;
        height: 40px;
        background-color: yellow;
        border: 1px solid yellow;
    }
    .error{
        color: red;
    }
    #td_sub{
        padding-left: 150px;
    }
</style>
<script>
    /*
    * 分析:
    *   1.给表单绑定onsubmit事件
    *   2.定义一些方法,分别校验表单项
    *
    *
    *
    *
    *
    * */



    window.onload = function () {
        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='35' height='25' 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='35' height='25' 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">
        <div class="rg_form">
            <form action="#" method="post" id="form">
                <table>
                    <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><input type="password" name="password" id="password">
                            <span id="s_password" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td><input type="email" id="email" name="email"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td><input type="text" id="name" name="name"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="phone">手机号</label></td>
                        <td><input type="number" id="phone" name="phone"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="gender">性别</label></td>
                        <td><input type="radio" id="gender" name="gender">男&nbsp;<input type="radio" name="gender">女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">出生年月</td>
                        <td><input type="date" id="birthday"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="img">验证码</label></td>
                        <td><input type="text" id="img" name="img">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
                                src="img/verify_code.jpg" id="img_check"></td>
                    </tr>
                    <tr>
                        <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>
            </form>
        </div>

    </div>
    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>
</div>


</body>
</html>