JS實(shí)現(xiàn)前端動(dòng)態(tài)分頁(yè)碼代碼實(shí)例
思路分析：有3種情況
第一種情況，當(dāng)前頁(yè)面curPage < 4
第二種情況，當(dāng)前頁(yè)面curPage == 4
第三種情況，當(dāng)前頁(yè)面curPage>4
此外，還要考慮，當(dāng)前頁(yè)碼 curPage < pageTotal（總頁(yè)碼）-2，才顯示 ...
首先，先是前端的布局樣式
<body> /*首先，在body中添加div */ <div id='pagination'><!-- 后面會(huì)在JS中動(dòng)態(tài)追加 ，此處為了，實(shí)現(xiàn)前端效果，所以注冊(cè)<a id='prevBtn'><</a><a id='first'>1</a><a href='http://www.intensediesel.com/bcjs/14609.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >2</a><a href='http://www.intensediesel.com/bcjs/14609.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >3</a><a href='http://www.intensediesel.com/bcjs/14609.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >4</a><span>...</span><a href='http://www.intensediesel.com/bcjs/14609.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' id='last'>10</a><a href='http://www.intensediesel.com/bcjs/14609.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' id='nextBtn'>></a>--> </div></body>
其次，是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代碼
<script type='text/javascript'> var pageOptions = {pageTotal:10,curPage:7,paginationId:’’}; dynamicPagingFunc(pageOptions); function dynamicPagingFunc(pageOptions){ var pageTotal = pageOptions.pageTotal || 1; var curPage = pageOptions.curPage||1; var doc = document; var paginationId = doc.getElementById(’’+pageOptions.paginationId+’’) || doc.getElementById(’pagination’); var html = ’’; if(curPage>pageTotal){ curPage =1; } /*總頁(yè)數(shù)小于5，全部顯示*/ if(pageTotal<=5){ html = appendItem(pageTotal,curPage,html); paginationId.innerHTML = html; } /*總頁(yè)數(shù)大于5時(shí)，要分析當(dāng)前頁(yè)*/ if(pageTotal>5){ if(curPage<=4){html = appendItem(pageTotal,curPage,html);paginationId.innerHTML = html; }else if(curPage>4){html = appendItem(pageTotal,curPage,html);paginationId.innerHTML = html; } } } function appendItem(pageTotal,curPage,html){ var starPage = 0; var endPage = 0;html+=’<a id='prevBtn'><</a>’;if(pageTotal<=5){ starPage = 1; endPage = pageTotal; }else if(pageTotal>5 && curPage<=4){ starPage = 1; endPage = 4; if(curPage==4){endPage = 5; } }else{ if(pageTotal==curPage){starPage = curPage-3;endPage = curPage; }else{starPage = curPage-2;endPage = curPage+1; } html += ’<a id='first'>1</a><span>...</span>’; }for(let i = starPage;i <= endPage;i++){ if(i==curPage){html += ’<a id='first'>’+i+’</a>’; }else{html += ’<a href='http://www.intensediesel.com/bcjs/14609.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >’+i+’</a>’; } }if(pageTotal<=5){ html+=’<a href='http://www.intensediesel.com/bcjs/14609.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' id='nextBtn'>></a>’; }else{ if(curPage<pageTotal-2){ html += ’<span>...</span>’; } if(curPage<=pageTotal-2){html += ’<a href='http://www.intensediesel.com/bcjs/14609.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >’+pageTotal+’</a>’; } html+=’<a href='http://www.intensediesel.com/bcjs/14609.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' id='nextBtn'>></a>’; } return html; } </script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 不使用XMLHttpRequest對(duì)象實(shí)現(xiàn)Ajax效果的方法小結(jié)2. ASP基礎(chǔ)入門第二篇(ASP基礎(chǔ)知識(shí))3. JSP出現(xiàn)中文亂碼問題解決方法詳解4. vue的路由動(dòng)畫切換頁(yè)面無(wú)法讀取meta值的bug記錄5. 移動(dòng)端HTML5實(shí)現(xiàn)拍照功能的兩種方法6. 怎樣打開XML文件？xml文件如何打開?7. ASP.NET MVC實(shí)現(xiàn)登錄后跳轉(zhuǎn)到原界面8. jsp實(shí)現(xiàn)簡(jiǎn)單用戶7天內(nèi)免登錄9. ASP.NET MVC限制同一個(gè)IP地址單位時(shí)間間隔內(nèi)的請(qǐng)求次數(shù)10. Spring依賴注入的三種方式實(shí)例詳解
網(wǎng)公網(wǎng)安備