《JavaScript交互式网页设计》复习考试

最新推荐文章于 2024-07-04 00:59:27 发布

java庞

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量3k

点赞数 6

分类专栏： Javascript 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/weixin_44899752/article/details/127527547

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

要求:使用jQuery或原生态js实现以下功能

一，登录功能
1）实现用户名的非空验证（当光标离开时有对应的提示）
2）实现密码的非空验证（当光标离开时有对应的提示）
3）实现重置功能
4）实现点击登录按钮，当用户名或密码错误时有对应的提示
5）实现点击登录按钮当用户名或密码正确时跳转到主页面
在这里插入图片描述

6）当用户名和密码为空时，点击登录提示

7）当密码错误时提示

登录成功后跳转到主页面

二，使用jQuery或原生态js完成图书管理系统的添加，删除，编辑功能

1）在文本输入框输入内容后点击“添加”按钮，效果图下图，同时文本框中的数据也清楚掉
在这里插入图片描述
2）点击删除按钮时，有删除提示如下图

3）当点击确定时删除此数据，当点击“取消”时有对应的提示

4）当点击编辑按钮时，对应的数据在文本框中显示，同时“添加”按钮变成“保存”按钮

5）当修改好书名和价格后，点击保存按钮，对应的表格中的数据会改变
在这里插入图片描述
登录页面

图书管理系统页面代码

<body>
    <h1 style="text-align: center;">图书管理系统</h1>
    <div style="margin: auto; width: 810px;">
        <table border="1" width="800px">
            <tr id="one">
                <th>编号</th>
                <th>书名</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
        </table>
    </div>
    <div style="margin: auto; width: 780px;margin-top: 100px">
        编号:<input type="text" id="bookid">
        书名:<input type="text" id="bookname">
        价格:<input type="text" id="bookprice">
        <button id="add_book">添加</button>
        <button id="save_book" style="display: none;">保存</button>
    </div>
</body>