简单好看的登录页面

最新推荐文章于 2024-06-23 13:13:26 发布

周粥舟轴

最新推荐文章于 2024-06-23 13:13:26 发布

阅读量1.7k

点赞数 3

文章标签： css javascript html

本文链接：https://blog.csdn.net/qq_48438492/article/details/118057726

版权

简单好看的登录页面

分享一个自己敲的登录页面，透明的登录框；
添加了验证码，换皮肤功能。
初学者，见谅见谅！！

话不多说，先上效果图：（前方高能，皮肤主题略骚气~）
在这里插入图片描述

HTML：【loginpage.html】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <title>登录页面</title>
    <link rel="stylesheet" type="text/css" href="../css/loginpage.css">
</head>
<body>
    <div class="container">
        <div class="changeSkin">
                <img src="../images/衣服.png" width="25px" height="25px">
        <div class="skins" >
            <img src="../images/bg.png" >
            <img src="../images/bg1.png" >
            <img src="../images/bg2.png" >
            <img src="../images/bg3.png" >
            <img src="../images/bg4.png" >
            <img src="../images/bg5.png" >
            <img src="../images/bg6.png" >
            <img src="../images/bg7.png" >
            <img src="../images/bg8.png" >
            <img src="../images/bg9.png" >
            <img src="../images/bg10.png" >
            <img src="../images/bg11.png" >
        </div>
        </div>

        <form action="">
            <div class="row">
                <input type = "text" placeholder="请输入您的用户名" required>
            </div>
            <div class="row">
                <label>
                    <img src="../images/close.png" alt="" id="eye">
                </label>
                <input type = "password" placeholder="请输入您的密码" required id="pwd">
            </div>
            <div class="row1">
                <input type = "text" placeholder="请输入验证码" required id="verify">
                <div id="checkCode" class="code"  onclick="createCode(4)" ></div>

            </div>
            <button type="submit" onclick="validateCode()">登录</button>
        </form>

    </div>
    <script>
        //实现显示/隐藏密码功能
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 通过一个flag算法，点击一次 变换一次
        var flag = 0;
        eye.onclick = function () {
            if (flag === 0){
                pwd.type = 'text';
                eye.src = "../images/open.png";
                flag = 1;
            }else{
                pwd.type = 'password';
                eye.src = "../images/close.png";
                flag = 0;
            }
        }
        //实现 输入框 文字，点击隐藏，失去焦点  恢复文字 功能。
        var text = document.querySelector('input');
        var verify = document.getElementById('verify');
        text.onfocus = function () {
            if (this.placeholder === '请输入您的用户名'){
                this.placeholder = '';
            }
        }
        pwd.onfocus = function () {
            if (this.placeholder === '请输入您的密码'){
                this.placeholder = '';
            }
        }
        verify.onfocus = function () {
            if (this.placeholder === '请输入验证码'){
                this.placeholder = '';
            }
        }
        text.onblur = function () {
            if (this.placeholder === ''){
                this.placeholder = '请输入您的用户名';
            }
        }
        pwd.onblur = function () {
            if (this.placeholder === ''){
                this.placeholder = '请输入您的密码';
            }
        }
        verify.onblur = function () {
            if (this.placeholder === ''){
                this.placeholder = '请输入验证码';
            }
        }

        //换皮肤功能
        var changeSkin = document.querySelector('.changeSkin');
        var skins = document.querySelector('.skins');
        var imgs = document.querySelector('.skins').querySelectorAll('img');
        var container = document.querySelector('.container');
        changeSkin.onmouseover = function () {
            skins.style.display = 'block';
        }
        changeSkin.onmouseout = function () {
            skins.style.display = 'none';
        }
        for(var i = 0;i < imgs.length;i++){
            imgs[i].onclick = function () {
                console.log(this.src);
                container.style.backgroundImage = 'url('+ this.src +')';

            }
        }

        //页面加载时，生成随机验证码
        window.onload=function(){
            createCode(4);
        }

        //生成验证码的方法
        function createCode(length) {
            var code = "";
            var codeLength = parseInt(length); //验证码的长度
            var checkCode = document.getElementById("checkCode");
            所有候选组成验证码的字符，当然也可以用中文的
            var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
                'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
            //循环组成验证码的字符串
            for (var i = 0; i < codeLength; i++)
            {
                //获取随机验证码下标
                var charNum = Math.floor(Math.random() * 62);
                //组合成指定字符验证码
                code += codeChars[charNum];
            }
            if (checkCode)
            {
                //为验证码区域添加样式名
                checkCode.className = "code";
                //将生成验证码赋值到显示区
                checkCode.innerHTML = code;
            }
        }

        //检查验证码是否正确
        function validateCode()
        {
            //获取显示区生成的验证码
            var checkCode = document.getElementById("checkCode").innerHTML;
            //获取输入的验证码
            var inputCode = document.getElementById("verify").value;
            console.log(checkCode);
            console.log(inputCode);
            if (inputCode.length <= 0)
            {
                alert("请输入验证码！");
            }
            else if (inputCode.toUpperCase() != checkCode.toUpperCase())
            {
                alert("验证码输入有误！");
                createCode(4);
            }
            else
            {
                alert("验证码正确！");
            }
        }

    </script>

</body>
</html>

CSS：【loginpage.css】

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    display: flex;
    width: 100vm;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background: url("../images/bg.png") center center;
    background-size: cover;
}
form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 45vh;
    height: 50vh;
    background: transparent;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 10px 10px 40px #24298f;
}
.row {
    width: 100%;
    position: relative;
}
.row1{
    width: 100%;
    position: relative;

}
input,button{
    outline: none;
    border: none;
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    letter-spacing: 2px;
}
input{
    background-color: transparent;
    border-bottom: 1px solid #b2b2b2;
    font-weight:bold;
    font-size:15px;
    color:#fff;
}
button{
    background-color: hotpink;
    color: #e3c7e2;
}
.row img{
    position: absolute;
    top: 2px;
    right: 2px;
    width: 24px;
}
.changeSkin{
    position: absolute;
    top: 15px;
    left: 15px;
    float: left;
}
.skins {
    position: absolute;
    display: none;
    width: 380px;

}

.changeSkin img{
    top: 15px;
    left: 15px;
}
.skins img{
    width:160px;
    height:85px;
    margin: 10px;
}
.code
{
    font-family:Arial;
    font-style:italic;
    color: #24298f;
    font-size:18px;
    border:0;
    padding:2px 3px;
    letter-spacing:3px;
    font-weight:bolder;
    float:right;
    cursor:pointer;
    width:90px;
    height:45px;
    line-height:45px;
    text-align:center;
    vertical-align:middle;
    background-color: #e3c7e2;
}
#verify{
    width: 45%;
    float: left;
}

皮肤背景图片：☟☟☟

皮肤主题图片点这里

周粥舟轴

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
13
评论
简单好看的登录页面

简单好看的登录页面分享一个自己敲的登录页面，透明的登录框；添加了验证码，换皮肤功能。初学者，见谅见谅！！话不多说，先上效果图：（前方高能，皮肤主题略骚气~）HTML：【loginpage.html】<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--<meta name="viewport" content="width=device
复制链接

扫一扫