【白二白】HTML登录界面全解！小白最喜欢的简单登录界面JS例程，看不懂算我输！

最新推荐文章于 2023-07-09 23:35:57 发布

呆B小白的成长历程

最新推荐文章于 2023-07-09 23:35:57 发布

阅读量271

点赞数 1

文章标签： javascript ajax jquery

本文链接：https://blog.csdn.net/qq_43246158/article/details/114094848

版权

记录前后端学习过程，用最通俗的语言从零开始输出！

代码只是次要，主要是理解简单的逻辑结构就好（其实是懒得扒干净。。。）

最重要的就是JS部分的代码！

JS代码如下：

$(function() {
    var temp1 = "";
    var temp2 = "";
    //按键按下事件
    $(document).keydown(function(event) {
        //判断回车按下（ASCII）
        if (event.keyCode == 13) {
            //验证有用户名输入
            if ($("#username").val().length > 0) {
                //用户名数据收集
                temp1 = $("#username").val();
            }
            //验证有密码输入
            if ($("#password").val().length > 0) {
                //密码数据收集
                temp2 = $("#password").val();
            }
            //取消动作，作用为防止多次按下
            return false;
        }
    });
    //按键抬起事件
    $(document).keyup(function(event) {
        //判断回车抬起
        if (event.keyCode == 13) {
            //判断用户名收集完毕
            if (temp1.length > 0) {
                //对username的反向赋值
                $("#username").val(temp1);
            }
            //判断密码收集完毕
            if (temp2.length > 0) {
                //对password的反向赋值
                $("#password").val(temp2);
            }
            //触发loginbtn的元素事件click，换句话说就是当做鼠标点击login按钮了
            $("#loginbtn").trigger("click");
        }
    });
    //login按钮触发函数
    $("#loginbtn").click(function() {
        //新建变量赋值，作用是取值
        var username = $("#username").val();
        var password = $("#password").val();
        //如果username中没有字符串
        if (username == "") {
            //弹窗文本
            $('#jinggaomodel').text('请输入用户名！');
            //模态窗属性
            $('#myModal').modal({
                //模态窗属性：当用户点击模态窗外就会关闭模态窗
                backdrop: false,
                //模态窗属性：当按下ESC键时不会关闭模态窗
                keyboard: false,
                //模态窗属性：当初始化时显示模态窗，换句话说就是：是否显示模态窗
                show: true

            });
            //设置一段时间后执行函数，此处为一秒后执行模态窗体隐藏
            setTimeout("$('#myModal').modal('hide')", 1000);
            //自动聚焦到username上，作用是辅助输入，光标自动锁定到username上
            $("#username").focus();
            //无返回值返回，作用是把控制权交给页面
            return;
        }
        //此处逻辑同上
        if (password == "") {
            $('#jinggaomodel').text('请输入密码！');
            $('#myModal').modal({
                backdrop: false,
                keyboard: false,
                show: true

            });
            setTimeout("$('#myModal').modal('hide')", 1000);
            $("#password").focus();
            return;
        }
        //window.location.href = "abuser.html";


        //ajax代码
        //POST和GET根据需要选择一种方式即可
        // GET
        $.ajax({
            type: "GET",
            contentType: "application/json;charset=UTF-8",
            //通过URL利用GET方式传输数据，md5为一种加密方法，此处将username和password传给后台
            url: "/vpbx.cgi?action=ablogin&username=" + username + "&password=" + hex_md5(password),
            //ajax请求成功执行函数
            success: function(data) {
                //后台验证失败
                if (data.err_message) {
                    //显示警告框，输出错误信息
                    alert(data.err_message);
                } else {
                    //当后台验证成功，进入链接的界面
                    window.location.href = "abuser.html";
                }
            },
        });
    });
});

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>简单页面</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/ablogin.css" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4 login_box">
                <div class="row">
                    <div class="col-md-3 col-md-offset-9">
                        <div class="login_switch">
                            <div class="login_switch_full"><a id="aid" href="login.html">这里可以塞一个跳转页面</a></div>
                        </div>
                    </div>
                </div>
                <div class="row login_box_title">这里是登录title</div>
                <div class="row login_box_user">
                    <div class="col-md-8 col-md-offset-2">
                        <form>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                                    <input type="text" class="form-control" id="username" placeholder="UserName">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <form>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                                    <input type="password" class="form-control" id="password" placeholder="Password">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="row login_box_btn">
                    <div class="col-md-4 col-md-offset-4">
                        <button class="btn btn-primary btn-block" id="loginbtn" role="button">登 录</button>
                    </div>
                </div>
            </div>           
        </div>
    </div>
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">提示信息</h4>
                </div>
                <div class="modal-body">
                    <!--<h4>模态框中的文本</h4>-->
                    <p id="jinggaomodel"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                    <!--<button type="button" class="btn btn-primary">Save changes</button>-->
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/ablogin.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>
</body>
</html>

CSS代码如下：

body {
    background-image:url("../images/login_bg.png");
    background-repeat:repeat;
    overflow-x:hidden;    
}
.login_box {
    width:446px;
    height:290px;
    background-image:url("../images/login_box.png");
    background-repeat:repeat-x;
    margin-top:110px;
    border-radius:6px;
    box-shadow:-2px 3px 9px #313438;
}
.login_switch {
    background-image:url("../images/login_switch_bg.png");
    background-repeat:repeat-x;
    width:66px;
    height:20px;
    margin-top:15px;
    border-radius:20px;
    padding:1px 1px;    
}
.login_switch_full {
    background-image:url("../images/login_switch_cn.png");
    width:64px;
    height:20px;
    background-repeat:repeat-x;
    border-radius:20px;
    font-family:微软雅黑;
    font-size:11px;
    /*color:#43474b;*/
    color:#003985;
    font-weight:700;
    line-height:20px;
    text-align:center;
    float:left;
}
#aid {
    text-decoration:none;
}
.login_switch_cn {
    background-image:url("../images/login_switch_cn.png");
    width:33px;
    height:20px;
    background-repeat:repeat-x;
    border-radius:20px;
    font-family:微软雅黑;
    font-size:13px;
    color:#43474b;
    line-height:20px;
    text-align:center;
    float:left;
}
.login_switch_en {
    color:#7a7c7e;
    line-height:20px;
    text-align:center;
    font-size:13px;
}
.login_box_title {
    margin-top:12px;
    font-size:25px;
    color:#003985;
    font-family:微软雅黑;
    font-weight:700;
    text-align:center;
}

.login_box_user {
    padding:15px 0 3px 0;
}
.login_box_btn {
    padding:30px 0;
}
.login_cp {
    line-height:23px;
    text-align:center;
    margin-top:70px;
    color:#ccc;
    width:446px;
}
.login_cp img {
    display:inline;    
}

呆B小白的成长历程

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【白二白】HTML登录界面全解！小白最喜欢的简单登录界面JS例程，看不懂算我输！

记录前后端学习过程，用最通俗的语言从零开始输出！代码只是次要，主要是理解简单的逻辑结构就好（其实是懒得扒干净。。。）最重要的就是JS部分的代码！JS代码如下：$(function() { var temp1 = ""; var temp2 = ""; //按键按下事件 $(document).keydown(function(event) { //判断回车按下（ASCII） if (event.keyCode == 13) {
复制链接

扫一扫