JS实现前端动态分页码代码实例
程序员文章站
2022-07-06 17:39:09
思路分析:有3种情况第一种情况,当前页面curpage < 4第二种情况,当前页面curpage == 4第三种情况,当前页面curpage>4此外,还要考虑,当前页码 curpage &...
思路分析:有3种情况
第一种情况,当前页面curpage < 4
第二种情况,当前页面curpage == 4
第三种情况,当前页面curpage>4
此外,还要考虑,当前页码 curpage < pagetotal(总页码)-2,才显示 ...
首先,先是前端的布局样式
<body> /*首先,在body中添加div id="pagination" */ <div id="pagination"> <!-- 后面会在js中动态追加 ,此处为了,实现前端效果,所以注册 <a id="prevbtn"><</a> <a id="first">1</a> <a href="#" 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="#" 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="#" 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="#" 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="#" 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; } /*总页数小于5,全部显示*/ if(pagetotal<=5){ html = appenditem(pagetotal,curpage,html); paginationid.innerhtml = html; } /*总页数大于5时,要分析当前页*/ 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="#" 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="#" 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="#" 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="#" 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。