使用jquery登录界面案例的实现

最新推荐文章于 2024-06-21 15:14:18 发布

香菜南波万

最新推荐文章于 2024-06-21 15:14:18 发布

阅读量467

点赞数 16

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/studyinstall/article/details/139444244

版权

css部分：

body{
            background:linear-gradient(200deg,#f56a29,#e21313);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .loginfrm{
            width: 400px;
            border-radius: 10px;
            background-color: #fff;
            padding:20px;
            box-shadow: 0 0 10px #fff;
        }
        .username{
           border: none;
           border-bottom: 2px solid #ccc;
            outline: none; 
            width: 100%;
        }
        .username.error{
            border: none;
            border-bottom: 2px solid red;
        }
        label{
            color: #e21313;
            width: 100%;
            position: relative;
            top: -10px;
        }
        button{
            margin-top: 10px;
            margin-left: 40%;
        }

html部分

 <div class="loginfrm">
        <label for="username" class="lbl">请输入用户名：</label>
        <input type="text" name="username" id="username" class="username">
        <button>用户登录</button>
    </div>

JavaScript：

 $(function(){
        $("button").on('click',function(){
            var username = $(".username").val()   //获取表单元素的val()
            if(username == ""){
                $(".username").addClass("error")
                alert("用户名不能为空")
            }else{
                $("button").text("登录中...")
                settimeout(function(){
                    $("button").text("用户登录")
                },3000)
                }
            })
    })

全部代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        body{
            background:linear-gradient(200deg,#f56a29,#e21313);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .loginfrm{
            width: 400px;
            border-radius: 10px;
            background-color: #fff;
            padding:20px;
            box-shadow: 0 0 10px #fff;
        }
        .username{
           border: none;
           border-bottom: 2px solid #ccc;
            outline: none; 
            width: 100%;
        }
        .username.error{
            border: none;
            border-bottom: 2px solid red;
        }
        label{
            color: #e21313;
            width: 100%;
            position: relative;
            top: -10px;
        }
        button{
            margin-top: 10px;
            margin-left: 40%;
        }
    </style>
</head>
<body>
    <div class="loginfrm">
        <label for="username" class="lbl">请输入用户名：</label>
        <input type="text" name="username" id="username" class="username">
        <button>用户登录</button>
    </div>



   <script>
    $(function(){
        $("button").on('click',function(){
            var username = $(".username").val()   //获取表单元素的val()
            if(username == ""){
                $(".username").addClass("error")
                alert("用户名不能为空")
            }else{
                $("button").text("登录中...")
                settimeout(function(){
                    $("button").text("用户登录")
                },3000)
                }
            })
    })


   </script>
</body>
</html>

实现的效果：