简单的JS特效-----验证登录名是否正确

最新推荐文章于 2023-05-09 14:56:31 发布

看到代码头都是大的

最新推荐文章于 2023-05-09 14:56:31 发布

阅读量468

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/ym5209999/article/details/107450183

版权

效果说明：

开始时，白框中显示为：Login Name，当鼠标移动到该字上时，该字往左上角移动，且出现输入框和提交按钮；
当输入框为空时，点击提交按钮，输入框本身提示性话语修改为：“输入的登录名不能为空！！!”，且将字体修改为红色；
当输入框存在内容时，点击提交按钮后，提交按钮会将整个空白区域占领，并获取输入框中的字符串，判定是否与设定的默认字符串一致，如果一致，将“submit”修改为：“验证成功！！！”，字体颜色修改为绿色，如果不一致，则将“submit”修改为：“验证失败！！！”，字体颜色修改为红色。

效果图如下：
验证效果
项目文件结构如下：
项目结构图
编译软件为：WebStorm
代码如下：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录特效</title>
    <link rel="stylesheet" href="../css/style.css" type="text/css">
</head>
<body>
<div class="login" id="login1">
    <div class="txt">
        <div class="txt2" id="txt2">
            <div class="loginName">
                <p>Login Name</p>
                <input title="" id="txt" placeholder="请输入登录名">
            </div>
        </div>
        <div class="sub" id="sub">
            <input title="" type="submit" value="submit">
        </div>
    </div>
</div>
<script src="../js/javascript.js" type="text/javascript"></script>
</body>
</html>

stylt.css

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    background: #dddddd;
}

.login {
    width: 500px;
    height: 300px;
    margin: 150px auto auto;
    box-sizing: border-box;
    padding: 20px;
    background: #e80080;
}

.login .txt {
    width: 460px;
    height: 60px;
    margin-top: 96px;
    overflow: hidden;
    box-sizing: border-box;
}

.login .txt .txt2 {
    float: left;
}

.login .txt .txt2 .loginName {
    float: left;
    width: 460px;
    font-size: 24px;
    transition: width, font-size 0.5s;
}

.login .txt .txt2 .loginName > p {
    line-height: 60px;

}

.login .txt2 .loginName > input {
    line-height: 34px;
    width: 370px;
    font-size: 16px;
    margin-left: 2px;
    padding-left: 10px;
    box-sizing: border-box;
}

.error::-webkit-input-placeholder {
    color: red;
}

.login .txt .sub {
    float: left;
    width: 80px;
    height: 60px;
    line-height: 60px;
    background: #f08ead;
}

.login .txt .sub > input {
    width: 78px;
    height: 60px;
    border: none;
    font-size: 24px;
    text-align: center;
    background: none;
    outline: none;
    transition: width 0.5s;
    border-left: 3px solid #0A98D5;
}

javascript.js

let txt2 = document.getElementById('txt2');
txt2.onmousemove = function () {
    txt2.children[0].style.width = '380px';
    txt2.children[0].style.fontSize = '12px';
    txt2.children[0].children[0].style.lineHeight = '20px';
};

let src = "admin"; //   测试登录名
let txt = document.getElementById('txt');
let sub = document.getElementById('sub');

sub.onclick = function () {
    if (txt.value.length === 0) {
        txt.placeholder = '输入的登录名不能为空！！!';
        txt.setAttribute('class', 'error');
    } else {
        txt2.style.display = 'none';
        sub.style.width = '460px';
        sub.children[0].style.width = '460px';
        sub.children[0].style.border = 'none';
        sub.children[0].style.textAlign = 'center';
        if (txt.value === src) {
            sub.children[0].style.color = 'green';
            sub.children[0].setAttribute('value', '验证成功！！！');
        } else {
            sub.children[0].style.color = 'red';
            sub.children[0].setAttribute('value', '验证失败！！！');
        }
    }
};