CSS+JS学习笔记

2020 年 03 月 24 日

1034 次浏览

3738字数

CSS+JS学习笔记
来源时间2018/8/5

展示地址：在线demo
展示图片：静态图
小熊猫图片来源网络侵删
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login - 小茉莉设计</title>
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="login">
        <div class="login-cc">
            <img src="img/1.png" id="img-1">
            <img src="img/2.png" id="img-2">
            <img src="img/3.png" id="img-3">
            <hr>
            <h3>Login</h3>
            <div class="input">
                <input type="text" value="" placeholder="请输入账号" id="do_login_1">
                <input type="password" value="" placeholder="请输入密码" id="do_login_2">
                <button data-v-6cb98ece="" class="btn">登录</button>
            <div style="height: 35px;" id="out"></div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

body {
    background-color: #f4f5f5
}

img {
    display: none;
    width: 150px;
    height: 130px;
    margin: 0 auto
}

.login {
    background-color: #fff;
    height: 500px;
    width: 300px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    margin: 0 auto;
    margin-top: 100px
}

.login-cc {
    text-align: center
}

#img-1 {
    display: block
}

input {
    padding: 10px;
    width: 100%;
    border: 1px solid #e9e9e9;
    border-radius: 2px;
    outline: 0;
    box-sizing: border-box;
    margin-top: 10px
}

.input {
    margin: 40px
}

.input > button {
    border: none;
    padding: .5rem 1.3rem;
    transition: background-color .3s, color .3s;
    width: 100%;
    height: 2.334rem;
    color: #fff;
    background-color: #007fff;
    border-radius: 2px;
    outline: 0;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: 15px
}

input:focus {
    border-color: #007fff
}

$("#do_login_1").click(function () {
    var isFocus = $("#do_login_1").is(":focus");
    if (true == isFocus) {
        $("#img-1").css('display', 'none')
        $("#img-2").css('display', 'block')
        $("#img-3").css('display', 'none')
    }
});


$("#do_login_2").click(function () {
    var isFocus = $("#do_login_2").is(":focus");
    if (true == isFocus) {
        $("#img-2").css('display', 'none')
        $("#img-3").css('display', 'block')
        $("#img-1").css('display', 'none')
    }
});


$("button").click(function () {
    var isFocus = $("#do_login_1").is(":focus");
    if (true != isFocus) {
        $("#img-2").css('display', 'none')
        $("#img-3").css('display', 'none')
        $("#img-1").css('display', 'block')
    }
    var isFocus = $("#do_login_2").is(":focus");
    if (true != isFocus) {
        $("#img-2").css('display', 'none');
        $("#img-3").css('display', 'none');
        $("#img-1").css('display', 'block');

    }

    layer.alert('登录成功了( ◕ x ◕ )！');

});

$("#out").click(function () {
    $("#img-2").css('display', 'none');
    $("#img-3").css('display', 'none');
    $("#img-1").css('display', 'block');
})

三个图~