1. 程式人生 > >逆水行舟,不進則退

逆水行舟,不進則退

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逆水行舟不進則退</title>
    <style>
        .pg-body{
            width: 900px;
            height: 500px;
            border: solid blue;
            position: fixed;
            left: 17%;
            top: 12%;
            right: -250px;
            bottom: -250px;
        }
        .pg-left{
            height: 500px;
            width: 500px;
            border-right: solid blue;
            float: left;
        }
        .pg-img{
            width: 450px;
            height: 450px;
            padding-left: 25px;
            padding-top: 25px;
        }
        .pg-right{
            width: 396px;
            height: 496px;
            float: left;
        }
        .pg-content{
            height: 400px;
            width: 300px;
            margin-left: 47px;
            margin-top: 45px;
        }
    </style>
</head>
<body style="margin: 0">
    <div class="pg-body">
        <div class="pg-left">
            <img src="8.jpg" class="pg-img">
        </div>
        <div class="pg-right">
            <div class="pg-content">
                <div style="width: 155px;margin: 0 auto;font-size:
                larger;font-weight: bold;color: red;padding-top: 25px;padding-bottom: 25px">
                    逆水行舟不進則退
                </div>
                <div>
                    <div style="padding-top: 25px;padding-bottom: 25px">
                        <label for="i1">使用者名稱:</label>
                        <input id="i1" type="text">
                    </div>
                    <div style="padding-top: 25px;padding-bottom: 25px;padding-left: 15px">
                        <label for="i2">密碼:</label>
                        <input id="i2" type="text">
                    </div>
                    <div style="padding-top: 50px;padding-left: 95px">
                        <a id="i3">
                            <input id="i5" type="submit" value="登入">
                        </a>
                        <a id="i4" style="padding-left: 25px" href="https://blog.csdn.net/qq_41901915">
                            <input type="submit" value="註冊">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i5').click(function () {
            var name=$('#i1').val();
            if(name.length>10){
                alert('使用者名稱長度不能超過10');
            }
            if(name.length<=0){
                alert('使用者名稱內容不能為空');
            }
            var number=$('#i2').val();
            if(number.length>10){
                alert('密碼長度不能超過10');
            }
            if(number.length<=0){
                alert('密碼不能為空');
            }
            if(name==='123'&&number==='123'){
                window.location.href='https://blog.csdn.net/qq_41901915';
            }else {
                alert('使用者名稱或密碼錯誤');
            }
        });
    </script>
</body>
</html>