第一部分——
此部分是我个人实现的功能,经过检测,但是布局方面欠妥
1.实现了前台分页,根据json数组的长度,和每页的容量,自动确定页数,生成导航button
2.根据书名精确搜索书籍(根据作者和书价来搜索,原理是一样的,因为比较懒,此处没有做)
3.当输入书籍信息为空或者不存在时,会有提示信息提醒,用户重新输入
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#container{
position: absolute;
width: 700px;
height: 450px;
margin-top: 60px;
margin-left: 300px;
border: solid 1px blue;
}
#id_book{
position: absolute;
width: 700px;
height: 400px;
border: solid 1px red;
bottom: 0px;
}
#id_search{
position: absolute;
width: 300px;
height: 30px;
border: solid 1px #428BCA;
top: 0px;
left: 180px;
}
#btn_location{
position: absolute;
width: 300px;
height: 30px;
margin-left: 550px;
margin-top: 550px;
}
#nameBook{
width: 80%;
height: 80%;
}
p{
text-align: center;
line-height: 50px;
font-size: 24px;
}
label{
line-height: 30px;
}
[type=button]{
width: 10%;
margin-left: 3px;
}
</style>
<script language="JavaScript">
var book = [
{'bookName':'人间','bookPrice':'50','author':'蔡骏'},
{'bookName':'病毒','bookPrice':'20','author':'蔡骏'},
{'bookName':'诅咒','bookPrice':'16','author':'蔡骏'},
{'bookName':'猫眼','bookPrice':'18','author':'蔡骏'},
{'bookName':'看着','bookPrice':'23','author':'蔡骏'},
{'bookName':'笛声','bookPrice':'24','author':'蔡骏'},
{'bookName':'客栈','bookPrice':'15','author':'蔡骏'},
{'bookName':'公寓','bookPrice':'27','author':'蔡骏'},
{'bookName':'地狱','bookPrice':'18','author':'蔡骏'},
{'bookName':'归来','bookPrice':'25','author':'蔡骏'},
{'bookName':'秘密','bookPrice':'14','author':'蔡骏'},
{'bookName':'旋转','bookPrice':'13','author':'蔡骏'},
{'bookName':'蝴蝶','bookPrice':'16','author':'蔡骏'},
{'bookName':'天机','bookPrice':'49','author':'蔡骏'},
{'bookName':'谋杀','bookPrice':'24','author':'蔡骏'},
{'bookName':'地狱','bookPrice':'32','author':'蔡骏'},
{'bookName':'生死','bookPrice':'12','author':'蔡骏'},
{'bookName':'一夜','bookPrice':'19','author':'蔡骏'},
{'bookName':'偷窥','bookPrice':'21','author':'蔡骏'},
{'bookName':'爱人','bookPrice':'34','author':'蔡骏'},
{'bookName':'圣婴','bookPrice':'17','author':'蔡骏'},
{'bookName':'迷城','bookPrice':'14','author':'蔡骏'},
{'bookName':'陷落','bookPrice':'15','author':'蔡骏'},
{'bookName':'绑架','bookPrice':'13','author':'蔡骏'},
{'bookName':'肉香','bookPrice':'15','author':'蔡骏'},
{'bookName':'遗骸','bookPrice':'17','author':'蔡骏'},
{'bookName':'疫 ','bookPrice':'15','author':'蔡骏'},
{'bookName':'卷人','bookPrice':'18','author':'蔡骏'},
{'bookName':'家书','bookPrice':'20','author':'蔡骏'},
{'bookName':'赤兔','bookPrice':'17','author':'蔡骏'}
];
var pageNum;
window.οnlοad=function(){
var btn_loca=document.getElementById('btn_location');
pageNum=Math.ceil(book.length/6);
book_show(1);
for(var i=1;i<=pageNum;i++){
var btn=document.createElement('input');
btn.setAttribute('type','button');
btn.setAttribute('value',i);
btn.setAttribute('onclick','book_show('+i+')');
btn_loca.appendChild(btn);
}
}
function book_show(page){
var bs=document.getElementById('id_book');
bs.innerHTML="";
for(var i=(page-1)*6;i<page*6-1;i++){
var bookMessage = new bookInformation(book[i].bookName,book[i].bookPrice,book[i].author);
bs.innerHTML=document.getElementById('id_book').innerHTML+bookMessage.display()+'</br>';
}
bs.innerHTML='<p>'+bs.innerHTML+'</p>';
}
function bookInformation(bookName,bookPrice,author) {
this.bookName = bookName;
this.bookPrice = bookPrice;
this.author = author;
this.display = function () {
return 'bookName' + bookName + ' ' + 'bookPrice' + bookPrice + ' ' + 'author' + author;
}
}
function searchBook(){
var search = document.getElementById('nameBook').value;
var i=0;
var count = 0;
document.getElementById('id_book').innerHTML="";
for(i;i<book.length+1;i++){
var index =book[i].bookName.indexOf(search);
if(index == -1 || search==""){
count++;/*当搜索的书名不存在时,count值会一直增加*/
if(count >= book.length){
document.getElementById('id_book').innerHTML = '<p>' + '没有找到您需要的书籍,请重新输入相关书籍的信息' + '</p>';
}
continue;
}
if( search == book[i].bookName){
var bookMessage = new bookInformation(book[i].bookName,book[i].bookPrice,book[i].author);
document.getElementById('id_book').innerHTML='<p>'+ bookMessage.display()+'</p>';
return;
}else if(index != -1){
var bookMessage = new bookInformation(book[i].bookName,book[i].bookPrice,book[i].author);
document.getElementById('id_book').innerHTML=document.getElementById('id_book').innerHTML+'<p>'+ bookMessage.display()+'</p>';
if( i >= book.length){
break;
}
}
}
alert(count);
}
</script>
</head>
<body>
<div id="container">
<label for="id_search">请输入需要查找的书名:</label>
<div id="id_search">
<input type="text" id="nameBook"/>
<input type="button" value="OK" οnclick="searchBook()"/>
</div>
<div id="id_book"></div>
</div>
<div id="btn_location"></div>
</body>
</html>
第二部分,布局
这个是个还较为合适的图书管理布局,有几处不错的地方
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合案例</title>
<style type="text/css">
#container{ width: 80%;
height: 800px;
margin: auto;
border: solid 1px gray;
}
#top{
width: 100%;
height: 200px;
border: solid 1px gray;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
#main{
width: 100%;
height: 600px;
border: solid 1px gray;
}
#main_top{
width: 100%;
border: solid 1px gray;
background-color: white;
}
#main_bottom{
width: 100%;
height: 100px;
border: solid 1px gray;
text-align: center;
}
#txt_search{
width:20em;
height: 2em;
font-size: 1.2em;
outline: none;
border: solid 1px gainsboro;
}
#btn_search{
width:10em;
height: 2em;
font-size: 1.2em;
outline: none;
border: solid 1px gainsboro;
}
#tab_book{
width: 100%;
}
#head_book{
width: 100%;
height: 50px;
font-size: 20px;
color: black;
}
#tab_book tr{
width: 100%;
height: 50px;
}
#tab_book tr td{
width: 33%;
border: solid 1px gray;
font-size: 1.5em;
}
a{
margin: 10px;
text-decoration: none;
color: black;
font-size: 2em;
}
</style>
<script language=javascript>
//在script里边,和HTML结合,将输出结果打印成一个表格;
function show_books(book_arr,index){
document.getElementById('tab_book').innerHTML='';
for(var i=(index)*6;i<((index+1)*6);i++){
var tr='<tr>'+
'<td>'+book_arr[i].bookName+'</td>'+
'<td>'+book_arr[i].bookPrice+'</td>'+
'<td>'+book_arr[i].author+'</td>'+
'</tr>';
document.getElementById('tab_book').innerHTML+=tr;
}
}
</script>
</head>
<body>
<div id="container">
<div id="top">
<div div_search>
<input type="text" id="txt_search"/>
<input type="button" id="btn_search" value="Search" οnclick="book_search()"/>
</div>
</div>
<div id="main">
<div id="main_top">
<table id="head_book">
<tr>
<th>bookname</th>
<th>bookprice</th>
<th>author</th>
</tr>
</table>
<table id="tab_book">
</table>
</div>
<div id="main_bottom">
</div>
</div>
</div>
</body>
</html>