黑马程序员技术交流社区

标题: 三剑客使用笔记 [打印本页]
作者: 杨纯纯    时间: 2018-12-17 15:12
标题: 三剑客使用笔记
                                                        注册页面代码注解 ：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
    body{
        background: url("../img/register_bg.png")no-repeat;
    }
        .wai{
            border: 7px #EEEEEE solid;
            width: 900px;
            height: 600px;
            margin: auto;
            margin-top: 75px;
            background: white;
        }
        .first{
            width:22%;
            /*border: 1px solid red;*/
            font-size: 20px;
            margin-left: 18px;
            margin-top: 13px;
            float: left;
        }
        p{
           color: orange;
            margin: auto;
        }

        table{
            width: 50%;
            /*border: 1px solid red;*/
            float: left;
            margin-top: 28px;
            margin-left:30px;
        }
        input[type]{
            border:1px grey solid;
            width: 190px;
            height: 30px;
            margin-top: 5px;
        }
        input[type="radio"]{
            width: 17px;
        }
        #yan{
          width:30%;
        }


        .last{
            width: 20%;
            /*border: 1px red solid;*/
            float:right;
            margin-top: 10px;
        }
        .erro{
           color:red;
        }
        #td_sub{
            padding-left: 150px;
        }


        </style>

</head>
<script>
    window.onload=function () {
        //1.给表单标签绑定事件，onsubmit 事件 是什么事件？
        document.getElementById("form").onsubmit=function () {
            //调用用户校验方法 chekUserName，调用密码校验方法chekPassWord。
            //返回chekUserName ,chekPassWord.
            //return chekuername && chekpassword;
            return chekusername()&& chekpassword();
        }
    }
    //校验用户名
    function chekusername(){
        //1.定义一个方法（函数）获取用户名的值
        var username = document.getElementById("username").value;
        //2.定义正则表达式,以单词字符开头，以单词字符结尾
        var regusername = /^\w{6,12}$/;
        //3.使用正则表达式来判断username的值是否符合规则
            var flag = regusername.test(username);
        //4.提示信息
        var susername = document.getElementById("susername");
        if(flag){
            //1.提示对号图片
            susername.innerHTML= "<img width='35' height='25' src='../img/gou.png' />"

        }else{
            //2.提示红色错误信息
            susername.innerHTML= "格式不正确请重新输入"
        }
        return flag;
    }

    //校验密码
    function chekpassword(){
        //1.定义一个方法（函数）获取用户名的值
        var password = document.getElementById("password").value
        //2.定义正则表达式,以单词字符开头，以单词字符结尾
        var regpassword = /^\w{6,12}$/;
        //3.使用正则表达式来判断password的值是否符合规则
        var flag = regpassword.test(password);
        //4.提示信息
        var spassword = document.getElementById("spassword");
        if(flag){
            //1.提示对号图片
            spassword.innerHTML= "<img width='35' height='25' src='../img/gou.png' />"

        }else{
            //2.提示红色错误信息
            spassword.innerHTML= "格式不正确请重新输入"
        }
        return flag;
    }




</script>



<body>



<div class="wai">
    <div class="first"> <p> 新用户注册 </p> <p><font color="#808080"> USER &nbsp; REGISTER</font> </p>    </div>
        <form action="#" id="form" method="get">
            <table  align="center">
                <tr>
                    <td>
                        用户名：
                    </td>
                    <td>
                        <input type="text" name="uername" id="username" placeholder="请输入账号">
                        <!--加了一个id名称用来获取span 以及class样式，输入错误时候显示的内容-->
                        <span id="susername" class="erro"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        密码：
                    </td>
                    <td>
                        <input type="password" name="password" id="password" placeholder="请输入密码">
                        <!--加了一个id名称用来获取span 以及class样式，输入错误时候显示的内容-->
                        <span id="spassword" class="erro"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        Email：
                    </td>
                    <td>
                        <input type="text" name="email" placeholder="请输入邮箱">
                    </td>
                </tr>
                <tr>
                    <td>
                        姓名：
                    </td>
                    <td>
                        <input type="text" name="name" placeholder="请输入姓名">
                    </td>
                </tr>
                <tr>
                    <td>
                        手机号：
                    </td>
                    <td>
                        <input type="text" name="number" placeholder="请输入账号">
                    </td>
                </tr>
                <tr>
                    <td>
                        性别：
                    </td>
                    <td>
                        <input type="radio"name="gender" value="男">男
                        <input type="radio"name="gender" value="女">女
                    </td>
                </tr>
                <tr>
                    <td>
                        出生日期：
                    </td>
                    <td>
                        <input type="date">
                    </td>
                </tr>
                <tr>
                    <td>
                        验证码：
                    </td>
                    <td>
                        <input id="yan" type="text">
                        <img src="../img/verify_code.jpg" height="40" width="131">
                    </td>
                </tr>
                <tr>
                    <td id="td_sub" colspan="2">
                        <input type="submit" value="注册">

                    </td>
                </tr>
            </table>
        </form>

    <div class="last">

        已有账号？ <a href="#"><font color="#ff1493">立即登陆</font></a>
    </div>


    </div>
</body>
</html>


                                                                                                轮播图 笔记代码注解：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<style>
    body{
        background-image: url("img/banner_2.jpg");
    }

</style>


<body id="img3">


<img id="img" src="img/banner_3.jpg" width="100%">
<!--<img id="img2" src="img/banner_2.jpg" width="100%">-->
<!--<img src="img/banner_1.jpg" width="100%">-->



<script>
   //      分析：
   //          1.在页面上使用img标签展示图片
   //          2.定义一个方法，修改图片对象的链接/src属性
   //          3.定义一个定时器，每隔3秒调用方法一次。
   //
   //   修改src属性
          var num = 1;
        function fun(){
            //num++；让num循环起来 到4以上时改为1 1~3就循环起来了，加上重复定时器
            num++;
            //判断num 是否大于3
            if(num>3){
                num=1;
            }
         //获取img对象
        var img = document.getElementById("img");
        img.src="img/banner_"+num+".jpg";
    }
    function fun2() {
            num++;
        if(num>3){
            num=1;
        }
        var img3 = document.getElementById("img3");
        img3.src="img/banner_"+num+".jpg"
    }
    window 是JS 中的顶级对象
   setInterval(fun,1000);
    var h1= history;
    alert(h1);


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

                                                                  定时器的两种写法（代码）：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
第二类：
<input type="button" id="openwindow" value="打开新窗口" >
<input type="button" id="closewindow" value="关闭新窗口" >
定时器：
    区别/用法
        setTimeout（）：在指定的毫秒数
            参数：
                1.JS代码或者方法对象
                2.毫秒值
        clearTimeout（）：停止倒计时


        setInterval（）：按照指定的周期，
        clearInterval（）：清空周期性定时器


<script>
var win = document.getElementById("openwindow");
var win2 = document.getElementById("closewindow");
win.onclick=function(){
        open("https://www.baidu.com");
}
var newwindow;
win2.onclick=function(){
    newwindow=close("https://www.baidu.com");
}
一次性定时器,有返回值 编号
var d = setTimeout(fun,2000);
取消定时器
clearTimeout(d);
function fun() {
    alert("bong");
}
循环定时器 ,返回值返回的唯一标识用来取消 重复定时器fun方法的引用（对象）

fun()先执行方法,不管其他的内容. fun;咱理解为当作参数使用,被一个操作执行之后 发生事情.



setInterval(fun2,1000);
//clearInterval(d);
function fun2() {
    alert("bong");
}

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






















欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2