复制代码 代码如下: function setPage(opt){ if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false}; var allPageNum = opt.allPageNum; //总的页数 var showPageNum = opt.showPageNum; //显示的页数 var curpageNum = opt.curpageNum; // 当前的页数 var pageDIvBox = document.getElementById(opt.pageDivId); //左边或右边显示页码的个数 var lrNum = Math.floor(showPageNum/2); if(curpageNum>1){ var oA = document.createElement('a'); oA.href='#1'; oA.innerHTML = '首页' pageDIvBox.appendChild(oA); } if(curpageNum>1){ var oA = document.createElement('a'); oA.href='#'+(curpageNum-1); oA.innerHTML = '上一页' pageDIvBox.appendChild(oA); } if(curpageNum<showPageNum-2 || allPageNum == showPageNum){ for(var i=1;i<=showPageNum;i++){ var oA = document.createElement('a'); oA.href = '#'+i; if(curpageNum==i){ oA.innerHTML = i; }else{ oA.innerHTML = "[" + i + "]"; } pageDIvBox.appendChild(oA); } }else{ //倒数第一页的处理 if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum-1){ for(var i=1;i<=showPageNum;i++){ console.log((curpageNum - showPageNum + i)); var oA = document.createElement('a'); oA.href = '#'+ (curpageNum - (showPageNum-1) + i); if(curpageNum == (curpageNum - (showPageNum-1) + i)){ oA.innerHTML = (curpageNum - (showPageNum-1) + i) }else{ oA.innerHTML = '['+(curpageNum - (showPageNum-1) + i)+']' } pageDIvBox.appendChild(oA); } } //最后一页的处理 else if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum){ for(var i=1;i<=showPageNum;i++){ console.log((curpageNum - showPageNum + i)); var oA = document.createElement('a'); oA.href = '#'+ (curpageNum - showPageNum + i); if(curpageNum == (curpageNum - showPageNum + i)){ oA.innerHTML = (curpageNum - showPageNum + i) }else{ oA.innerHTML = '['+(curpageNum-showPageNum + i)+']' } pageDIvBox.appendChild(oA); } }else{ for(var i=1;i<=showPageNum;i++){ var oA = document.createElement('a'); oA.href = '#'+ (curpageNum - (showPageNum-lrNum) + i); if(curpageNum == (curpageNum - (showPageNum-lrNum) + i)){ oA.innerHTML = (curpageNum - (showPageNum-lrNum) + i) }else{ oA.innerHTML = '['+(curpageNum - (showPageNum-lrNum) + i)+']' } pageDIvBox.appendChild(oA); } } } if(curpageNum<allPageNum){ for(var i=1;i<=2;i++){ if(i==1){ var oA = document.createElement('a'); oA.href='#'+(parseInt(curpageNum)+1); oA.innerHTML = '下一页' }else{ var oA = document.createElement('a'); oA.href='#'+allPageNum; oA.innerHTML = '尾页' } pageDIvBox.appendChild(oA); } } var oA = document.getElementsByTagName('a'); //给页码添加点击事件 for(var i=0;i<oA.length;i++){ oA[i].onclick = function(){ //当前点的页码 var sHref = this.getAttribute('href').substring(1); //清空页数显示 pageDIvBox.innerHTML = ''; setPage({ pageDivId:'page', showPageNum:5, //显示的个数 allPageNum:10, //总页数 curpageNum:sHref //当前页数 }) } } } window.onload = function(){ setPage({ pageDivId:'page', showPageNum:5, //显示的个数 allPageNum:10, //总页数 curpageNum:1 //当前页数 }) } 昨天看了妙味课堂的 分页视频教程，今天自己参照其思路，自己写了下，并且自己新增了一个‘显示页码个数'的属性 ‘showPageNum'; 下面对关键的几个地方做个总结： 1.点击的当前页码需要在显示的页码中居中; 无论是显示 3页 5页 7页 9页…… 等等 当前页要居中，可以推出一个公式 用显的页码个数除以2 再取整，就可以得到左右需要显的页码个数。这个对后面的分页判断很有用 var lrNum = Math.floor(showPageNum/2); 2.获取页码 this.getAttribute('href') 用它可以得到相对路径;this.href 用它只能得到绝对路径DEMO在线演示 http://demo.jb51.net/js/2012/js_page/

　　推荐阅读

　　JavaScript中将一个值转换为字符串的方法分析[译]

译者注:前两天在看ES5的时候顺便出了一道题,今天看到这篇文章,刚好解释的很清楚,就翻译了一下.在JavaScript中,主要有三种方法能让任意值转换为字符串.本文讲解了每种方法以及各自的优缺点.1.转换字符串的三种方法 >>>详细阅读

本文标题：javascript分页代码(当前页码居中)

地址：http://www.17bianji.com/kaifa2/JS/23088.html

 1/2    1