JQuery特效之六----登录框

最新推荐文章于 2021-07-18 14:06:05 发布

Eric010101

最新推荐文章于 2021-07-18 14:06:05 发布

阅读量1k

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/oneil2016/article/details/84647970

版权

JavaWeb 专栏收录该内容

85 篇文章 2 订阅

订阅专栏

前端三大组成

html构建内容，css美化，js控制交互，jquery是一个常用js库。

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/css/baidu.css"/>
</head>
<body>

   <div id="header">
       <div id="header-con">
           <div>
               <a href="javascript:;" id="blogin" onclick="showLoginBox();">登录</a>
           </div>
           <div>
               <a href="javascript:;" id="breg">注册</a>
           </div>
           
       </div>
   </div>
   <div id="loginbox">
       <div class="login-item"><input type="text" id="username" placeholder="input username"></div>
       <div class="login-item"><input type="password" id="password" placeholder="input password"></div>
       <div class="login-item" onclick="doLogin();"><a href="javascript:;">登录</a></div>
   </div>
    
            
    <script src="static/lib/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="static/lib/layer-v3.1.1/layer/layer.js"></script>
    <script src="static/js/baidu.js"></script>
</body>
</html>

css：

*{
    padding: 0px;
    margin: 0px;
    font-family: cursive;
}

#header{
    width: 100%;
    height: 40px;
    background-color: #000;
}
#header-con{
    width: 900px;
    height: 40px;
    margin: 0px auto;
}

a{
    text-decoration: none;
}
#header-con div{
    float: right;
    line-height: 40px;
    margin-left: 10px;
}
#header-con div a{
    color: azure;
    font-size: 20px;
}
.login-item input{
    width: 350px;
    height: 40px;
    
}
.login-item a{
    width: 350px;
    height:40px;
    background-color:cadetblue;
    display: block;
    text-align: center;
    line-height: 40px;
    color: aliceblue;
    font-size: 30px;
}
.login-item{
margin-top: 30px;
    margin-left: 20px;
}
#loginbox{
display: none;
}

js:

function showLoginBox(){

    layer.open({
        type:1,
        title:"登录",
        area:["395px","300px"],
        content:$("#loginbox")
    });

}

function doLogin(){
    var username = $.trim($("#username").val());
    var password = $.trim($("#password").val());
    if(username==""||password==""){
        layer.alert(
        "用户名或密码不能为空",{
        title:"提示",
            icon:5
        });
    }else{
        //使用ajax提交到后台
    //$.ajax("/controller/login",{"username":username,"password":password},function(responseresult){});
    layer.alert(
        "登录成功",{
        title:"提示",
            icon:6
        });
    }
}

Eric010101

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery特效之六----登录框

前端三大组成html构建内容，css美化，js控制交互，jquery是一个常用js库。html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;
复制链接

扫一扫

专栏目录