仿图书管理系统

来源：互联网发布：阿里云国际版注册编辑：程序博客网时间：2024/05/17 03:06

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8" />

<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 lip{

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>

<divid="wrap">

<divid="nav" class="clear">

<inputtype="button" id="navAddBookBtn" value="添加图书"/>

<labelid="library">图书馆</label>

<inputtype="button" id="navFindBookBtn" value="查找图书"/>

</div>

<ulid="allBook"></ul>

<divid="bookAddView" style="display:none">

<inputid="finishAdd" type="button" value="提交"/>

</div>

<divid="boodFindView" style="display:none;">

<selectid="select">

<optionvalue="bookName">名字</option>

<optionvalue="bookAuthor">作者</option>

<optionvalue="bookPublish">版社</option>

<optionvalue="bookPrice">价格</option>

</select>

<inputtype="text" id="searchTxt" value=""/>

<inputtype="button" id="find" value="查找"/>

<inputtype="button" id="out" value="退出"/>

<ulid="someBook"></ul>

</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) {

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

varaBook = new Book(name, price, author, publish);

this.bookArr.push(aBook);

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

this.showAllBook();

}

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

this.showAllBook= function() {

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

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

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

var theBook = this.bookArr[i];

varaLi = $("<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 删除这本图书

vartheLi = $(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(vari = 0; i < this.bookArr.length; i++) {

var aBook = this.bookArr[i];

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

// 显示这本图书

varaLi = $("<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();

var price = $("#bookPrice").val();

var author = $("#bookAuthor").val();

var publish =$("#bookPublic").val();

manager.addBookToLibrary(name, price, author, publish);

//2、隐藏这个浮层

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

});

// 给查找按钮绑定事件

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

// 隐藏添加图书界面

$("#bookAddView").hide();

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

});

// 给查找页面的 “查找”按钮绑定事件

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

// 1.取出 select 选择的是什么

var selected= $("#select").val();

//2、取出输入框输入的内容

var searchTxt= $("#searchTxt").val();

//3、让 BookManager 去查找对应的图书

manager.findBookByCategory(selected, searchTxt);

});

// 给查找页面的 “退出”按钮绑定事件

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

$("#boodFindView").hide(1000);

});

</script>

0 0