仿图书管理系统

最新推荐文章于 2021-07-17 00:29:20 发布

原创最新推荐文章于 2021-07-17 00:29:20 发布 · 346 阅读

1 ·

CC 4.0 BY-SA版权

<!DOCTYPE html>

<html>

<head>

<style>

padding: 0;

margin: 0;

}

#wrap{

width: 400px;

margin: 20px auto 0;

overflow-y: scroll;

height: 600px;

border: 1px solid #ccc;

position: relative;

}

.clear:after{

display: block;

content: "";

clear: both;

}

#nav{

width: 100%;

height: 44px;

background: black;

text-align: center;

}

#navAddBookBtn{

color: white;

height: 44px;

font-size: 15px;

background: transparent;

border: 0px;

float: left;

cursor: pointer;

}

#navFindBookBtn{

color: white;

height: 44px;

font-size: 15px;

background: transparent;

border: 0px;

float: right;

cursor: pointer;

}

#library{

color: red;

line-height: 44px;

font-size: 30px;

}

#bookAddView{

position: fixed;

text-align: center;

background: white;

height: 200px;

top: 100px;

width: 400px;background: #CCCCCC;}

#bookAddView label{display: block;margin-top: 5px;}

#bookAddView #finishAdd{color: red;font-size: 18px;cursor: pointer;}

#boodFindView{width: 400px;height: 556px;

position: absolute;top: 44px;background: white;}

#boodFindView #out{float: right;margin-right: 20px;cursor: pointer;}

#find{cursor: pointer;}

ul{list-style: none;}

#allBook li{

height: 60px;

width: 100%;

background: #DDDDDD;

margin-top: 10px;

}

#allBook li p{

border-bottom: 1px dashed #CCCCCC;

text-align: center;

font-size: 18px;

}

#allBook li .liPrice{

float: left;

}

#allBook li .removeBook{

float: right;

background: red;

cursor: pointer;

}

</style>

<title>仿图书管理系统</title>

</head>

<body>

</div>

</div>

</select>

</div></div>

</body>

</html>

书名

作者

价格

出版社

* */

function Book(name, price, author, publish) {

this.bookName = name;

this.bookPrice = price;

this.bookAuthor = author;

this.bookPublish = publish;

}

function BookManager() {

//1、属性-存储图书（仓库）

this.bookArr = [];

// 2、添加图书的功能

this.addBookToLibrary = function(name, price, author, publish) {

// 根据传递来的图书信息，创建一本图书并且存储到仓库

var aBook = new Book(name, price, author, publish);

this.bookArr.push(aBook);

// 添加了一本图书就展示一次

this.showAllBook();

}

/*展示所有图书的公共方法*/

this.showAllBook = function() {

$("#allBook").html(""); // 每次展示都先置空所有图书

// 遍历仓库，取出每一本图书，展示到页面

for(var i = 0; i < this.bookArr.length; i++) {

var theBook = this.bookArr[i];

var aLi = $("<li></li>");

aLi.html("<p class='liName'>" + theBook.bookName + "</p>" + "<span class='liPrice'>" + theBook.bookPrice + "</span>" + "<span class='removeBook'>删除</span>");

$("#allBook").append(aLi);

// 给 li 一个自定义属性，记录它是第几个

aLi.attr("index", i);

}

//3、给删除按钮绑定事件

$(".removeBook").click(function() {

// 告诉 BoookManager 删除这本图书

var theLi = $(this).parent();

var index = theLi.attr("index");

manager.removeBookFromLi(index);

});

}

// 3、删除图书的方法

this.removeBookFromLi = function(index) {

this.bookArr.splice(index, 1);

//重新显示

this.showAllBook();

}

//4、查找图书

this.findBookByCategory = function(category, keyword) {

for(var i = 0; i < this.bookArr.length; i++) {

var aBook = this.bookArr[i];

if(aBook[category].indexOf(keyword) != -1) {

// 显示这本图书

var aLi = $("<li></li>");

aLi.html("<p class='liName'>" + aBook.bookName + "</p>" + "<span class='liPrice'>" + aBook.bookPrice + "</span>" + "<span class='removeBook'>删除</span>");

$("#someBook").append(aLi);

}

// 创建一个图书馆

var manager = new BookManager();

// 1、给“添加”按钮绑定事件

$("#navAddBookBtn").click(function() {

$("#bookAddView").show(1000);

});

//2、给“提交”按钮绑定事件--添加图书页面的“提交”按钮

$("#finishAdd").click(function() {

//1、让图书馆添加一本图书

var name = $("#bookName").val();