526互联

模拟题-2

发布时间 2023-04-22 14:04:17作者: Abagnate

register.html

代码：

<!--register.html-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 请此处添加页面美观控制代码，完成题目要求。如果需要使用bootstrap，可以引用css和js目录下的文件*/
        table,
        td {
            border: none;
        }

        table,
        img {
            width: 380px;
            text-align: left;
            vertical-align: middle;
        }

        tr {
            height: 18px;
        }

        .firstTD {
            background-color: #ECE7E7;
            color: #000000;
        }

        #main {
            font-size: 14px;
        }

        .error {
            font-size: 10px;
            color: #F50F13;
        }
    </style>

    <script src="./js/jquery-3.2.0.min.js"></script>
    <script>
        /*
        请在此处添加控制代码，完成题目要求内容。如果需要jquery，可以自行引用js目录下的文件
        */
        $(document).ready(function () {
            check01();
            check02();
            check03();
            check04();
            login();
        });

        function check01() {
            $("#userno").blur(function () {
                let userno = $("#userno").val();
                console.log(userno);
                $("#userno_error").empty();
                if (userno == "") {
                    $("#userno_error").append("请检查输入！");
                }
            });
        }

        function check02() {
            $("#username").blur(function () {
                let username = $("#username").val();
                console.log(username);
                $("#username_error").empty();
                if (username == "" || username.length < 2 || username.length > 6) {
                    $("#username_error").append("请检查输入！");
                }
            });
        }

        function check03() {
            $("#email").blur(function () {
                let email = $("#email").val();
                console.log(email);
                $("#email_error").empty();
                if (email == "") {
                    $("#email_error").append("请检查输入！");
                }
            });
        }

        function check04() {
            $("#userpwd").blur(function () {
                let userpwd = $("#userpwd").val();
                console.log(userpwd);
                $("#userpwd_error").empty();
                if (userpwd == "") {
                    $("#userpwd_error").append("请检查输入！");
                }
            });

            $("#repwd").blur(function () {
                let userpwd = $("#userpwd").val();
                let repwd = $("#repwd").val();
                console.log(repwd);
                $("#repwd_error").empty();
                if (repwd == "") {
                    $("#repwd_error").append("请检查输入！");
                }
                else if (userpwd != repwd) {
                    $("#repwd_error").append("两次密码不一致！");
                }
            });
        }

        function login() {
            $("#btnok").click(function () {
                let userno = $("#userno").val();
                let username = $("#username").val();
                let email = $("#email").val();
                let userpwd = $("#userpwd").val();
                let sex = $('input:radio:checked').val();
                console.log(sex);
                $.ajax({
                    type: "post",
                    url: "http://120.79.153.0/register.aspx",
                    data: {
                        userno: userno,
                        userpwd: userpwd,
                        username: userpwd,
                        sex: sex,
                        email: email
                    },
                    complete: function (data) {
                        console.log(data);
                        if (data.responseText == "TRUE") {
                            alert("注册成功");
                            location.replace("./login.html");
                        }
                        else {
                            alert("注册失败");
                        }
                    }
                });
            });
        }
    </script>
</head>
<!--    本题仅能在register.html的<style>和<script>标签中新增样式或JavaScript代码；不可改动HTML的标签和内容，亦不可在标签中新增id、class或style属性。
    -->

<body>

    <div id="main">
        <table border="1" cellspacing="0" cellpadding="5px">
            <tr>
                <td colspan="3">
                    <div id="header"><img src="img/logo.png" id="logoImg" /></div>
                </td>
            </tr>

            <tr>
                <td class="firstTD">工号：</td>
                <td><input type="text" id="userno" maxlength="12"> </td>
                <td>
                    <div id="userno_error" class="error"></div>
                </td>
            </tr>

            <tr>
                <td class="firstTD">姓名：</td>
                <td><input type="text" id="username" /> </td>
                <td>
                    <div id="username_error" class="error"></div>
                </td>
            </tr>

            <tr>
                <td class="firstTD">邮箱：</td>
                <td><input type="text" id="email" /> </td>
                <td>
                    <div id="email_error" class="error"></div>
                </td>
            </tr>

            <tr>
                <td class="firstTD">登录密码：</td>
                <td><input type="password" id="userpwd" /> </td>
                <td>
                    <div id="userpwd_error" class="error"></div>
                </td>
            </tr>

            <tr>
                <td class="firstTD">确认密码：</td>
                <td><input type="password" id="repwd"> </td>
                <td>
                    <div id="repwd_error" class="error"></div>
                </td>
            </tr>

            <tr>
                <td class="firstTD">性别：</td>
                <td>
                    <input name="sex" type="radio" value="1" />男
                    <input name="sex" type="radio" value="0" />女
                </td>
                <td>
                    <div id="sex_error" class="error"></div>
                </td>
            </tr>

            <tr>
                <td colspan="2" align="center"><input id="btnok" type="image" src="img/button.gif" /></td>
                <td></td>
            </tr>
        </table>
    </div>
</body>

</html>
View Code

 

login.html

代码：

<!--login.html-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <!--CSS设置信息请在css/login.css进行设置    -->
    <link href="css/login.css" rel="stylesheet" type="text/css" />
    <style>
        /* #username div:nth-child(1),
        #password div:nth-child(1) {
            float: left;
        } */

        #username,
        #password {
            display: inline-block;
        }

        .inputarea {
            text-align: left;
        }
    </style>

    <script src="./js/jquery-3.2.0.min.js"></script>
    <script>
        /*
        请在此处添加控制代码，完成题目要求内容。如果需要jquery，可以自行引用js目录下的文件
        */
        $(document).ready(function () {
            goBack();
            login();
        });

        function goBack() {
            $("a").click(function () {
                location.replace("register.html");
            });
        }

        function login() {
            $("#btnLogin").click(function () {
                let userno = $("#userno").val();
                let userpwd = $("#userpwd").val();
                if (userno == "" || userpwd == "") {
                    $("#error").append("请输入账号密码");
                }
                else {
                    $.ajax({
                        type: "post",
                        url: "http://120.79.153.0/login.aspx?userno=" + userno + "&userpwd=" + userpwd,
                        complete: function (data) {
                            console.log(data);
                            if (data.responseText == "TRUE") {
                                localStorage.setItem("userno", userno);
                                alert("登录成功");
                                location.replace("mainframe.html");
                            }
                            else {
                                alert("登录失败");
                            }
                        }
                    });
                }
            });

            $("#btnCancel").click(function () {
                $("#userno").val("");
                $("#userpwd").val("");
                $("#error").empty();
            });
        }

    </script>
</head>
<!--    本题仅能在login.html的<style>和<script>标签中新增样式或JavaScript代码；不可改动HTML的标签和内容，亦不可在标签中新增id、class或style属性。
    -->

<body>

    <div id="username" class="inputarea">
        <div>工号</div>
        <div><input type="text" id="userno" placeholder="请输入工号" maxlength="12"></div>
    </div>
    <div id="password" class="inputarea">
        <div>密码</div>
        <div><input type="password" id="userpwd" placeholder="请输入密码"></div>
    </div>
    <div id="error"></div>
    <div id="login">
        <input type="button" id="btnLogin" value="登录" />
        <input type="button" id="btnCancel" value="取消" />
        <a href="register.html">注册</a>
    </div>

</body>

</html>
View Code

 

learning.html

代码：

<!--learning.html-->
<!DOCTYPE html>
<html>

<head>
    <title> 操作说明 </title>
</head>

<body>
    <div id="title">操作说明</div>
    <div id="content">
        <div>1.必须先登录才能管理图书。</div>
        <div>2.管理员只能操作自己添加的图书信息。</div>
    </div>
    <div id="sign">
        <div>图书管理办公室</div>
    </div>

</body>

</html>

<style>
    #title {
        color: green;
        font-size: 18px;
        text-align: center;
        border-bottom: 1px solid black;
        padding-bottom: 10px;
        font-weight: bold;
    }

    #content {
        padding: 10px;
        line-height: 25px;
        color: blue;
        text-align: left;
    }

    #sign {
        color: blue;
        text-align: right;
    }
</style>
View Code

 

mainframe.html

代码：

<!--mainframe.html-->
<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
    <div id="nav">
        <div id="selectLearning">操作学习</div>
        <div id="selctManage">管理图书</div>
    </div>
    <div id="main">
        <iframe id="learning" src="learning.html" width="100%" height="100%" scrolling="no"></iframe>
        <div id="manage">
            <div id="inputMessage">
                图书编号<input id="bookNo" type="text">
                图书名称<input id="bookName" type="text">
                出版社<input id="bookPublisher" type="text">
                <input type="button" id="sumbitAdd" value="确定添加">
                <input type="button" id="sumbitModify" value="确定修改">
            </div>

            <div id="content">
                <table>
                </table>
            </div>
        </div>
    </div>

</body>

</html>

<script src="./js/jquery-3.2.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("#learning").show();
        $("#manage").hide();
        selectLearning();
        selectManege();
        addBook();
        modifyBook();
        $("#sumbitAdd").show();
        $("#sumbitModify").hide();
    });

    function selectLearning() {
        $("#selectLearning").click(function () {
            $("#learning").show();
            $("#manage").hide();
        });
    }

    function selectManege() {
        $("#selctManage").click(function () {
            $("#manage").show();
            $("#learning").hide();
            refreshBooks();
        });
    }

    function refreshBooks() {
        let userno = localStorage.getItem("userno");
        $.ajax({
            type: "get",
            url: "http://120.79.153.0:8080/getBooks.aspx?",
            data: {
                userno: userno
            },
            complete: function (data) {
                let books = data.responseJSON;
                if (books.length == 0) {
                    $("#content table").hide();
                    alert("暂无图书信息");
                }
                else {
                    $("#content table").show();
                    $("#content table").empty();
                    let htmlContent = "";
                    htmlContent += "<tr><th>图书编号</th><th>图书名称</th><th>出版社</th><th>操作</th></tr>"
                    for (let i = 0; i < books.length; i++) {
                        htmlContent += "<tr>";
                        htmlContent += "<td>" + books[i].bookNo + "</td>";
                        htmlContent += "<td>" + books[i].bookName + "</td>";
                        htmlContent += "<td>" + books[i].bookPublisher + "</td>";
                        htmlContent += "<td>" + "<a href='javascript:void(0);'>修改</a></td></tr>";
                    }
                    $("#content table").append(htmlContent);
                }
            }
        });
    }

    function addBook() {
        $("#sumbitAdd").click(function () {
            let userno = localStorage.getItem("userno");
            let bookNo = $("#bookNo").val();
            let bookName = $("#bookName").val();
            let bookPublisher = $("#bookPublisher").val();

            $.ajax({
                type: "post",
                url: "http://120.79.153.0:8080/addBooks.aspx",
                data: {
                    userno: userno,
                    bookNo: bookNo,
                    bookName: bookName,
                    bookPublisher: bookPublisher
                },
                complete: function (data) {
                    console.log(data);
                    if (data.responseText == "TRUE") {
                        alert("添加成功");
                        $("#bookNo").val("");
                        $("#bookName").val("");
                        $("#bookPublisher").val("");
                        refreshBooks();
                    }
                    else {
                        alert("添加失败");
                    }
                }
            });
        });
    }

    function modifyBook() {

        $("body").on("click", "#content > table > tr > td:nth-child(4)", function () {
            let currentRow = $(this).closest("tr");
            let currentBookNo = currentRow.find("td:eq(0)").text();
            let currentbookName = currentRow.find("td:eq(1)").text();
            let currentbookPublisher = currentRow.find("td:eq(2)").text();

            $("#bookNo").val(currentBookNo);
            $("#bookName").val(currentbookName);
            $("#bookPublisher").val(currentbookPublisher);
            $("#sumbitAdd").hide();
            $("#sumbitModify").show();
        });

        $("body").on("click", "#sumbitModify", function () {
            let userno = localStorage.getItem("userno");
            let newBookNo = $("#bookNo").val();
            let newBookName = $("#bookName").val();
            let newBookPublisher = $("#bookPublisher").val();

            $.ajax({
                type: "post",
                url: "http://120.79.153.0:8080/updateBooks.aspx",
                data: {
                    userno: userno,
                    bookNo: newBookNo,
                    bookName: newBookName,
                    bookPublisher: newBookPublisher
                },
                complete: function (data) {
                    if (data.responseText == "TRUE") {
                        alert("修改成功");
                        $("#bookNo").val("");
                        $("#bookName").val("");
                        $("#bookPublisher").val("");
                        $("#sumbitAdd").show();
                        $("#sumbitModify").hide();
                        refreshBooks();
                    }
                    else {
                        alert("修改失败");
                    }
                }
            });
        });
    }


</script>

<style>
    html,
    body {
        width: 100%;
        height: 100%;
    }

    #nav {
        height: 10%;
        background-color: green;
    }

    #main {
        height: 90%;
    }

    #nav div {
        color: blue;
        font-size: 20px;
        margin-left: 80px;
        display: inline-block;
        margin-top: 2%;
    }

    #selectLearning:hover,
    #selctManage:hover,
    table td:last-child {
        cursor: pointer;
    }

    #learning {
        height: 100%;
        border: none;
    }

    #manage {
        height: 100%;
    }

    #inputMessage {
        margin-top: 2%;
        margin-bottom: 2%;
        height: 10%;
        border: 1px solid black;
        text-align: center;
    }

    #bookNo {
        margin-top: 2%;
    }

    table {
        margin-left: 10%;
        width: 80%;
    }

    table,
    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    tr th:nth-child(1) {
        width: 30%;
    }

    tr th:nth-child(2) {
        width: 30%;
    }

    tr th:nth-child(3) {
        width: 30%;
    }

    th {
        background-color: #fffcc6;
        font-weight: bold;
    }
</style>
View Code