json數組實作圖書管理系統——圖書管理、查詢、前台分頁功能

第一部分——

此部分是我個人實作的功能，經過檢測，但是布局方面欠妥

1.實作了前台分頁，根據json數組的長度，和每頁的容量，自動确定頁數，生成導航button

2.根據書名精确搜尋書籍（根據作者和書價來搜尋，原理是一樣的，因為比較懶，此處沒有做）

3.當輸入書籍資訊為空或者不存在時，會有提示資訊提醒，使用者重新輸入

  json數組實作圖書管理系統——圖書管理、查詢、前台分頁功能

<!DOCTYPE html>
<html>
<head 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 + '&nbsp;' + 'bookPrice' + bookPrice + '&nbsp;' + '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>

第二部分，布局

這個是個還較為合适的圖書管理布局，有幾處不錯的地方

  json數組實作圖書管理系統——圖書管理、查詢、前台分頁功能

<html 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>

json數組實作圖書管理系統——圖書管理、查詢、前台分頁功能

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條