前端学习笔记-2.7注册登录页面一

很基础的注册登录页面,背景是2张png图，给了背景色。
用的js很基础，适合新手学习。
效果图如下:
这里写图片描述

js:
想让弹出的提示框消失，用了计时器，可是重复了很多，感觉鸡肋，暂时先这样吧。

    //创建验证码：4位数字
    function createCode(){
        //创建随机四位数字
        var code = Math.floor(Math.random()*9000+1000);
        //获取元素对象
        var span = document.getElementById("codeSpan");
        //将数字放到span中
        span.innerHTML = code;
    }
    //校验验证码
    function checkCode(){
        //获取系统生成验证码
        var code1 = document.getElementById("codeSpan").innerHTML;
        //获取用户输入验证码
        var code2 = document.getElementById("code").value;
        //获取span
        var span = document.getElementById("code2Span");
        //设定校验规则
        if(code2=="" ||code2==null){
            span.innerHTML = "验证码不能为空";
            span.style.display = "block";
            setTimeout(function(){
                span.style.display = "none";
            },2000);
            return false;
        }else if(code2==code1){
            span.innerHTML = "验证码正确";
            span.style.display = "block";
            setTimeout(function(){
                span.style.display = "none";
            },2000);
            return true;
        }else{
            span.innerHTML = "验证码错误";
            span.style.display = "block";
            setTimeout(function(){
                span.style.display = "none";
            },2000);
            return false;
        }
    }
    //验证邮箱
    function checkMail(){
        return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/);
    }
    //验证密码
    function checkPwd(){
        return checkField("pwd",/^[a-z]\w{5,7}$/);
    }
    //验证协议
    function checkAgree(){
        document.getElementById("sub").disabled=!document.getElementById("agree").checked;
    }
    //验证登录
    function checkSub(){
        checkMail();
        checkPwd();
        checkAgree();
        checkCode();
        return checkMail()&&checkPwd()&&checkAgree()&&checkCode();
    }
    /*------------------------------------------------------------*/       
    //封装校验：相同的保留，不同的传参
    function checkField(id,reg){
        //获取用户数据
        var inp = document.getElementById(id);
        var va = inp.value;
        var alt = inp.alt;
        //获取span对象
        var span = document.getElementById(id+"Span");
        //开始校验
        if(va=="" ||va==null){
            //输出校验结果
            span.style.display = "block";
            span.innerHTML = alt+"不能为空";
            setTimeout(function(){
                span.style.display = "none";
            },2000);
            return false;
        }else if(reg.test(va)){
            //输出校验结果
            span.style.display = "block";
            span.innerHTML = alt+"格式正确";
            setTimeout(function(){
                span.style.display = "none";
            },2000);
            return true;
        }else {
            //输出校验结果
            span.style.display = "block";
            span.innerHTML = alt + "格式不正确";
            setTimeout(function(){
                span.style.display = "none";
            },2000);
            return false;
        }
    }

html:

<body onload="createCode()">
<div class="lo-wrap">
    <div class="content">
        <a class="lo-logo" href="#"><img src="img/tt.logo.png"></a>
        <div class="lo-bg"><img src="img/slogan_c6bab2f.png"></div>
        <div class="loginBox">
            <div class="loginBox-wrap">
                <form action="#" method="get" onsubmit="return checkSub()">
                    <div class="mailNum"><input type="text" name="mail" id="mail" placeholder="邮箱/手机号" alt="邮箱" onblur="checkMail()"/>
                        <span id="mailSpan"></span>
                    </div>
                    <div class="password">
                        <input type="password" name="pwd" id="pwd" placeholder="密码" alt="密码" onblur="checkPwd()"/>
                        <span id="pwdSpan" ></span>
                    </div>
                    <div class="code-box">
                        <input type="text" name="code" id="code" placeholder="验证码" alt="验证码" onblur="checkCode()"/>
                        <span id="codeSpan" class="codeSpan" onclick="createCode()"></span>
                        <span id="code2Span" class="code2Span"></span>
                    </div>
                    <div class="agree-wrap">
                        <input type="checkbox" id="agree" onclick="checkAgree()"/>
                        <p class="agree">
                            我已阅读并同意
                            <a href="https://www.toutiao.com/user_agreement/" target="_blank">用户协议</a>
                            "和"
                            <a href="https://www.toutiao.com/privacy_protection/" target="_blank">隐私条款</a>
                        </p>
                    </div>
                    <input type="submit" id="sub" class="submitBtn" value="登录"  disabled="disabled"/>
                </form>
                <ul class="login-msn">
                    <li id="mailPhone" class="mail-login-msn">
                        <a href="login02.html"><img src="img/phone-icon.png">手机</a>
                    </li>
                    <li id="qq" class="qq-login-msn">
                        <a href="#" target="_blank"><img src="img/qq-icon.png">QQ</a>
                    </li>
                    <li id="weix" class="weChat-login-msn">
                        <a href="#" target="_blank"><img src="img/weix-icon.png">微信
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>

css:

        a,img,span,ul,li{margin:0;padding:0;}
        a{text-decoration: none;}
        body{background:#DFDFDF;padding:0;margin:0;font-family:MICROSOFT YaHei,Helvetica,Tahoma;}
        /*logo*/
        .lo-logo{float:left;margin-left:-40px;}
        .lo-logo img{transform:scale(0.5);}
        /*背景图*/
        .lo-bg{width:1020px;height:650px;margin:auto;}
        .lo-bg img{transform:scale(0.5);margin-top:-220px;}
        /*登录框*/
        .loginBox{margin-left:auto;margin-right:auto;width:400px;height:380px;background:#fff;opacity:0.9;margin-top:-445px;position:relative;}
        .loginBox-wrap{width:300px;height:380px;margin:auto;border:none;}
        /*邮箱/手机号*/
        .mailNum{width:300px;height:70px;position:relative;}
        .mailNum input{width:296px;height:36px;margin-top:30px;font-size:16px;text-indent:10px;}
        .mailNum span{height:26px;font-size:10px;position:absolute;top:20px;right:0;display:none;background-color:#444;color:#fff;width:115px;text-align:center;line-height:26px;padding:0 2px;}
        /*密码*/
        .password{width:300px;position:relative;}
        .password input{width:296px;height:36px;margin-top:10px;font-size:16px;text-indent:10px;}
        .password span{height:26px;font-size:10px;position:absolute;top:0;right:0;display:none;background-color:#444;color:#fff;width:115px;text-align:center;line-height:26px;padding:0 2px;}
        /*验证码*/
        .code-box{position:relative;width:300px;height:50px;}
        .code-box input{width:296px;height:36px;margin-top:8px;font-size:16px;text-indent:10px;}
        .code-box .codeSpan{width:110px;height:36px;position:absolute;right:4px;top:11px;background:url("img/timg.gif");font-size:30px;color:blue;cursor:pointer;text-align:center;line-height:36px;}
        .code-box .code2Span{height:26px;font-size:10px;position:absolute;top:-10px;right:0;display:none;background-color:#444;color:#fff;width:115px;text-align:center;line-height:26px;padding:0 2px;}
        /*协议*/
        .agree-wrap{width:300px;height:50px;position:relative;font-size:14px;}
        .agree-wrap input{position:absolute;top:10px;}
        .agree-wrap a{color:#406599;}
        .agree{margin-top:10px;position:absolute;left:20px;}
        .submitBtn{width:300px;height:40px;background:#F85959;color:#ffffff;border:none;font-size:18px;cursor:pointer;}
        /*其他登录方式*/
        .login-msn{width:300px;height:60px;margin-top:40px;}
        .mail-login-msn{width:40px;height:60px;margin-left:60px;float:left;text-align: center;display:inline-block;font-size:12px;}
        .qq-login-msn{width:40px;height:60px;margin-left:30px;float:left;text-align: center;display:inline-block;font-size:12px;}
        .weChat-login-msn{width:40px;height:60px;margin-left:30px;float:left;text-align: center;display:inline-block;font-size:12px;}
        .mail-login-msn img,.qq-login-msn img,.weChat-login-msn img{margin-bottom:6px;}
        .mail-login-msn a,.qq-login-msn a,.weChat-login-msn a{color:#505050;}

代码有些杂乱，见笑。因为着急做，还有很多欠考虑的地方。

前端学习笔记-2.7注册登录页面一

猜你喜欢