简单的登录注册页面展示

最新推荐文章于 2022-01-05 18:58:40 发布
流动的白沙
最新推荐文章于 2022-01-05 18:58:40 发布
阅读量440
点赞数 1
文章标签： css css3 html javascript
本文链接：https://blog.csdn.net/Linshu__/article/details/121071565
版权
<!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>
        <link rel="stylesheet" href="./css/base.css">
        <!-- 每次更换之后，要把downloads里面的全部内容替换了 -->
        <link rel="stylesheet"
            href="./download/font_2895845_ipznsvfuop/iconfont.css">
        <style>
            /* 登录页面 */
            .login-bg {
                position: relative;
                overflow: hidden;
                width: 100%;
                background: url(./images/pic2.jpg);
                background-size: cover;
                height: 600px;
                opacity:.7 ;
            }

            .login-box {
                /* position: relative; */
                margin: 100px 0 0 150px;
                width: 40%;
                height: 350px;
            }

            /* 伪元素的定位参照是给它添加伪元素的元素 */
            .login-box::before {
                content: '';
                position: absolute;
                z-index : -1;
                top:100px;
                left:150px;
                width: 40%;
                height: 350px;
                background-color:grey ;
                opacity: .4;
            }

            .title {
                padding: 15px 50px;
                text-align: center;
                color:#fff;
                font-size:24px;
            }

            input {
                padding:13px;
                border-bottom: 1px solid #fff;
            }

            input,
            p {
                display: block;
                width: 60%;
                height: 40px;
               /* 背景色：可以设置透明色，不一定是默认的白色 */
                background-color: transparent;
                margin: 0 auto;
            }

            .col1,
            .col2 {
                position: relative;
            }

            /* 遇事不决套盒子 */
            span {
               position: relative;
               top:32px;
               left:74px
            }

            .submit {
                /* 可以用这个属性控制文本位置 */
                /* padding 值不能为负 */
                text-indent: -20px;
                width: 0;
                height: 0;
                line-height: 0;
                background-color: #ccc;
                border-radius: 21px;
                padding:12px 55px;
                margin-top:20px
            }
            
            /* 验证码页面 */
            /* 核心思路：先顾好盒子的位置，再在盒子里定位添加背景图片或者改变背景颜色，修改透明度，不要忘记将伪元素的z-index:-1 */
            .message {
                display: none;
                position: absolute;
                z-index: 999;
                top:300px;
                left:250px;
                width: 500px;
                height: 150px;
            }
            
            .message::before {
                content: '';
                position: absolute;
                z-index: -1;
                top:0;
                left:0;
                width: 500px;
                height: 150px;
                background-color:#ccc;
                opacity: .4;
            }

            button {
                position: absolute;
                top: 53px;
                right:61px;
            }

            /* mask */
            .mask {
                display: none;
                position: absolute;
                top:0;
                left:0;
                width: 100%;
                height: 600px;
                background:url(./images/pic4.jpg);
                background-size: cover;
            }

        </style>
    </head>
    <body>
        <!-- 登录页面 -->
        <div class="login-bg">
            <div class="login-box">
                <div class="title">LOGIN</div>
                <div class="col1"> <span class='iconfont
                        icon-yonghu'></span><input type="text" value="Username"
                        class='username'></div>
                <!-- 这样的结构下，span和input都是同级，不能定位，所以我们要尽量多套盒子 -->
                <div class="col2">
                    <span
                        class='iconfont icon-mima'></span><input
                        class="password" type="password"
                        value="Password">
                </div>
                <input type="submit" value="LOGIN" class='submit'>
                <p>忘记密码？</p>
            </div>
        </div>

        <!-- 验证密码页面 -->
        <div class="message">
            <div class="message-head" style="width:100%;height:50px"></div>
            <div class="message-body">
                <input class="pnumb" type="text" value= '手机号'>
                <input class="note" type="text" value="短信验证码"> <button>提交</button>
            </div>
        </div>

        <!-- mask -->
        <div class="mask"></div>

        <script>
            window.addEventListener('load',function(){

                var username = document.querySelector('.username')
                var password = document.querySelector('.password')
                username.addEventListener('focus',function(){
                    if (username.value = 'Username') {
                        this.value = ''
                    }
                })
                username.addEventListener('blur',function(){
                    if (username.value = ' ') {
                        this.value = 'Username'
                    }
                })

                password.addEventListener('focus',function(){
                    if (password.value = 'password') {
                        this.value = ''
                    }
                })
                password.addEventListener('blur',function(){
                    if (password.value = ' ') {
                        this.value = 'password'
                    }
                })


                // 点击忘记密码
                var forget = document.querySelector('p')
                var message = document.querySelector('.message')
                // 手机号码
                var pnumb = document.querySelector('.pnumb')
                // 短信验证码
                var note = document.querySelector('.note')
                // 短信验证码框的头部
                var messageHead = document.querySelector('.message-head')
                // 遮罩层
                var mask = document.querySelector('.mask')

                // 1.点击了忘记密码
                forget.addEventListener('click',function(){
                    // 1.1 短信验证码的盒子出现
                    message.style.display = 'block'
                    // 遮罩层出现
                    mask.style.display = 'block'
                    // 1.2 获得与失去焦点事件
                    pnumb.addEventListener('focus',function(){
                        if (pnumb.value == '手机号') {
                            this.value = ''
                        }
                    })
                    pnumb.addEventListener('blur',function(){
                        if (pnumb.value == '') {
                            this.value = '手机号'
                        }
                    })

                    note.addEventListener('focus',function(){
                        if (note.value == "短信验证码") {
                            this.value = ''
                        }
                    })
                    note.addEventListener('blur',function(){
                        if (note.value == '') {
                            this.value = '短信验证码'
                        }
                    })

                })
                
                // 2.点击了提交按钮
                var btn = document.querySelector('button')
                var count = 10
                btn.addEventListener('click',function(){
                    // 给计时器起一个名字,方便之后清除
                    var timer = setInterval(countDown,1000)
                    countDown()

                    function countDown() {
                        if (count <= 0) {
                            btn.disabled = false
                            btn.innerHTML = "发送"
                            clearInterval(timer)
                            count = 10
                        } else {
                            btn.disabled = true
                            btn.innerHTML = '还剩'+count+'s发送短信验证码'
                            count--
                        }
                        
                    }
                })
            
                // 3.实现拖动盒子在页面中移动,前提是要有定位
                var message = document.querySelector('.message')
                var messageHead = document.querySelector('.message-head')
                // 鼠标按下，拿到鼠标在盒子里面的坐标
                messageHead.addEventListener('mousedown',function(e){
                    var x = e.pageX - message.offsetLeft
                    var y = e.pageY - message.offsetTop
                    messageHead.style.cursor = 'move'
                    console.log(x,y);

                    // 鼠标移动，盒子的定位=鼠标的页面坐标 - 鼠标在盒子里面的坐标
                    // 给页面文档添加点击事件，因为移动的范围是整个文档
                    document.addEventListener('mousemove',move)
                        function move(e) {
                            message.style.left = e.pageX - x + 'px'
                            message.style.top = e.pageY - y + 'px'
                        }
                    
                    // 鼠标弹起，移除拖动事件
                    document.addEventListener('mouseup',function(){
                       document.removeEventListener('mousemove',move)
                    })
                })
            
            
            })
            
        </script>
    </body>
</html>