基于前一个js分页，我将代码改成一个面向对象版的js分页，代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> a{ margin: 5px; } </style> <title>分页</title> <script type="text/javascript"> window.onload=function(){ new page( {id:'div1', nowNum:8, allNum:10, callback:function(now,all){ alert('当前页：'+now+','+'总共'+all+'页') } } ) } function page(json){ this.json=json; if(!this.json.id){ return false } this.obj=null; this.nowNum=null; this.allNum=null; this.callback=null; var _this=this; this.obj=document.getElementById(this.json.id); this.nowNum=this.json.nowNum||1; this.allNum=this.json.allNum||5; this.callback=this.json.callback||function(){}; if(this.nowNum >3 && this.allNum >5){ var oA=null; this.oA=document.createElement('a'); this.oA.href="#"+1; this.oA.innerHTML="首页"; this.obj.appendChild(this.oA) } if(this.nowNum>1){ var oA=null; this.oA=document.createElement('a'); this.oA.href="#"+(this.nowNum-1); this.oA.innerHTML="上一页"; this.obj.appendChild(this.oA) } if(this.allNum<=5){ for(var i=0;i<this.allNum;i++){ var oA=null; this.oA=document.createElement('a'); this.oA.href='#'+(i+1); if(this.nowNum==i){ this.oA.innerHTML=(i+1); }else{ this.oA.innerHTML='['+ (i+1) +']'; } this.obj.appendChild(this.oA); } }else{ for(var i=1;i<=5;i++){ var oA=null; this.oA=document.createElement('a'); if(this.nowNum==1||this.nowNum==2){ this.oA.href='#'+i; this.oA.innerHTML='['+i+']'; if(this.nowNum==i){ this.oA.innerHTML=i } }else if((this.allNum - this.nowNum) == 0||(this.allNum - this.nowNum == 1)){ this.oA.href='#'+(this.allNum-5+i); if(this.allNum - this.nowNum==0 && i==5){ this.oA.innerHTML=(this.allNum-5+i); }else if(this.allNum - this.nowNum==1 && i==4){ this.oA.innerHTML=(this.allNum-5+i); }else{ this.oA.innerHTML='['+(this.allNum-5+i)+']'; } }else{ this.oA.href = '#' + (this.nowNum - 3 + i); if(i==3){ this.oA.innerHTML=(this.nowNum-3+i); }else{ this.oA.innerHTML='['+(this.nowNum-3+i)+']'; } } this.obj.appendChild(this.oA); } } if((this.allNum - this.nowNum) > 0){ var oA=null; this.oA=document.createElement('a'); this.oA.href='#'+(this.nowNum+1); this.oA.innerHTML = '下一页'; this.obj.appendChild(this.oA); } if((this.allNum - this.nowNum)>2){ var oA=null; this.oA=document.createElement('a'); this.oA.href='#'+this.allNum; this.oA.innerHTML = '尾页' this.obj.appendChild(this.oA); } this.callback(this.nowNum,this.allNum); var aA=null; this.aA=this.obj.getElementsByTagName('a'); for(var i=0;i<this.aA.length;i++){ var _this=this; this.aA[i].onclick=function(){ _this.change(this); }; } } page.prototype.change=function(btn){ var nowNum=null; this.nowNum = parseInt(btn.getAttribute('href').substring(1)); this.obj.innerHTML=''; new page( { id: this.json.id, nowNum:this.nowNum, allNum:this.allNum } ) } </script> </head> <body> <div id="div1"> <!-- <a href="#1">1</a> <a href="#1">2</a> <a href="#1">3</a> <a href="#1">4</a> <a href="#1">5</a> --> </div> </body> </html>