思路分析:有3種情況
第一種情況,當前頁面curPage < 4
第二種情況,當前頁面curPage == 4
第三種情況,當前頁面curPage>4
此外,還要考慮,當前頁碼 curPage < pageTotal(總頁碼)-2,才顯示 ...
首先,先是前端的佈局樣式
/*首先,在body中添加div id="pagination" */ 1 2 3 4 ... 10 > -->
其次,是css代碼
*{ margin: 0; padding: 0; } #pagination{ width: 500px; height: 100px; border: 2px solid crimson; margin: 50px auto ; padding-top: 50px ; padding-left: 50px; } .over,.pageItem{ float: left; display: block; width: 35px; height: 35px; line-height: 35px; text-align: center; } .pageItem{ border: 1px solid orangered; text-decoration: none; color: dimgrey; margin-right: -1px;/*解決邊框加粗問題*/ } .pageItem:hover{ background-color: #f98e4594; color:orangered ; } .clearfix{ clear: both; } .active{ background-color: #f98e4594; color:orangered ; } .banBtn{ border:1px solid #ff980069; color: #ff980069; } #prevBtn{ margin-right: 10px; } #nextBtn{ margin-left: 10px; }
JavaScript代碼
pageTotal){ curPage =1; } /*總頁數小於5,全部顯示*/ if(pageTotal5){ if(curPage4){ html = appendItem(pageTotal,curPage,html); paginationId.innerHTML = html; } } } function appendItem(pageTotal,curPage,html){ var starPage = 0; var endPage = 0; html+=''; if(pageTotal5 && curPage1...'; } for(let i = starPage;i '+i+''; }else{ html += ''+i+''; } } if(pageTotal>'; }else{ if(curPage...'; } if(curPage'+pageTotal+''; } html+='>'; } return html; }" _ue_custom_node_="true">
[lousu-xi ] JS實現前端動態分頁碼代碼實例已經有491次圍觀