wangzhe
/
logn.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;

    }
    i {
        list-style: none;
    }
    a {
        text-decoration: none;
    }
    body {
        background-color: rgb(144, 157, 203);
    }
    .lognin {
        position: absolute;
        left: 50%;
        top: 30%;
        width: 300px;
        height: 300px;
        padding: 20px 0 0 0px;
        background-color: white;
        color: rgb(84, 83, 83);
        text-align: center;
    }
    input {
        border: 0;
        border-bottom: 1px solid #ccc;
    }
    button {
        width: 90%;
        height: 50px;
        color: white;
        background-color: rgb(115, 115, 238);
        cursor: pointer;
        border: 0;
        outline: none;
        margin: 10px 0 10px 0px;
        font-size: 17px;
    }
    #user {
        width: 60%;
        height: 30px;
        margin-bottom: 10px;
    }
    #pws {
        width: 60%;
        height: 30px;
        margin-bottom: 10px;
    }
    #yanzheng {
        width: 30%;
        height: 30px;
        margin: 0px 10px 10px 0;
    }
    .yz {
        background-color: #ccc;
        text-decoration:line-through;
    }
</style>
<body>
    <div class="lognin">
        <p style="font-size: 25px;font-weight: 500;color: black;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;margin-bottom: 14px;">账号登录</p>
        <form action="">
            <label for="user">账号：</label><input type="text" id="user"><br>
            <label for="pws">密码：</label><input type="password" id="pws"><span id="chakan" style="position: absolute;right: 12%;top: 115px;"><img src="img/close.png" alt="" width="25px" height="20px"></span><br>
            <input type="text" id="yanzheng"><span class="yz">验证码</span> <br>
            <input type="checkbox" name="" id="zidong"><label for="zidong">下次自动登录</label><a href="#" style="color:  rgb(84, 83, 83);margin-left: 60px;">忘记密码？</a><br>
            <button >登录</button><br>
            <i >还没有账号？<a href="lognup.html">去注册</a></i>
        </form>
    </div>
    <script>
        var yz = document.querySelector('.yz');
        function getrandom(){
            var suiji = ((Math.random()*10000).toString()).substr(0,4);
            yz.innerHTML= suiji;
        }
        getrandom();
        yz.addEventListener('click', function(){
            getrandom();
        })
        var user = document.querySelector('#user');
        var pws = document.querySelector('#pws');
        var btn = document.querySelector('button');
        var yanzheng  = document.querySelector('#yanzheng');

        btn.addEventListener('click',function(){
            if(!(user.value&&pws.value)){
                alert('账号密码不能为空！');
            }else{alert('ee')}
            if(yanzheng.value!=yz.innerHTML){
                alert('验证码错误！');
            }else{alert('sss')}
        })
        var chakan = document.querySelector('#chakan');
        var img = document.querySelector('img');
        var flag=0;
        chakan.addEventListener('click',function(){
            if(flag==0){
                pws.type='text';
                img.src= 'img/open.png';
                flag=1;
            }else{
                pws.type='password';
                img.src= 'img/close.png';

                flag=0;
            }
        })
    </script>
</body>
</html>