文字表达有限，直接上代码了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一个基于面向对象的分页组件</title> <style> html,body{padding:0;margin:0;} p{padding:0;margin:0;} a{text-decoration: none} .Paging{overflow: hidden;} .Paging-item{float: left;padding: 10px 15px;background: #4caf50;color: #fff;margin-left: 5px;} .Paging-item-active{background: #ff568e;} </style> </head> <body> <div></div> </body> <script> //分页组件类 function Paging(container,opt){ //自定义事件 this.eventHandlers={}; //默认设置 this.config={ nowNum: 1, allNum: 10, callback: function(){} } if(opt){ this.extend(this.config,opt); } //外层容器 this.Box= null; //渲染组件 this.render(container); } Paging.prototype={ constructor: Paging, /*绑定自定义事件*/ on: function(eventType,eventHandler){ if(typeof this.eventHandlers[eventType] === 'undefined'){ this.eventHandlers[eventType]= []; } this.eventHandlers[eventType].push(eventHandler); }, /*触发自定义事件*/ fire: function(eventType){ if( this.eventHandlers[eventType] instanceof Array){ var len= this.eventHandlers[eventType].length; for(var i=0;i<len;i++){ this.eventHandlers[eventType][i](); } } }, /*渲染UI结构*/ renderUI: function(){ this.Box= document.createElement('div'); this.Box.className= 'Paging'; var nowNum= this.config.nowNum; var allNum= this.config.allNum; //当前页大于或等于4，第一页才能隐藏，总数大于5才能显示首页 if (nowNum >=4 && allNum >=6) { var pageA= document.createElement('a'); pageA.className= 'Paging-item Paging-item-start' pageA.href='#1'; pageA.innerHTML= '首页'; this.Box.appendChild(pageA); }; //当前页只要不是第一页就显示上一页 if(nowNum>=2){ var pageA= document.createElement('a'); pageA.className= 'Paging-item Paging-item-pre' pageA.href='#'+ (nowNum-1); pageA.innerHTML= '上一页'; this.Box.appendChild(pageA); } //只有5页时 if(allNum<=5){ for(var i=1;i<=allNum;i++){ var pageA= document.createElement('a'); pageA.className= 'Paging-item' pageA.href= '#'+ i; if(nowNum==i){ pageA.className= 'Paging-item Paging-item-active' pageA.innerHTML=i; }else{ // pageA.innerHTML='['+ i +']'; pageA.innerHTML=i; } this.Box.appendChild(pageA); } }else{ for(var i=1;i<=5;i++){ var pageA= document.createElement('a'); pageA.className= 'Paging-item' pageA.href= '#'+ (nowNum-3+i); //对当前页为前2页的处理 if(nowNum === 1 || nowNum === 2){ pageA.href= '#'+ i; if(nowNum === i){ pageA.className= 'Paging-item Paging-item-active' pageA.innerHTML= i; }else{ // pageA.innerHTML= '['+i+']'; pageA.innerHTML= i; } }/*对当前页为后2页的处理*/else if((allNum-nowNum) ===0 || (allNum-nowNum) === 1){ /*== <a href="">[6]</a> <a href="">[7]</a> <a href="">[8]</a> <a href="">[9]</a> <a href="">10</a> ==*/ pageA.href= '#'+ ((allNum-5)+i); if((allNum-nowNum) ===0 && i===5){ pageA.className= 'Paging-item Paging-item-active' pageA.innerHTML=((allNum-5)+i); }else if((allNum-nowNum) ===1 && i===4){ pageA.className= 'Paging-item Paging-item-active' pageA.innerHTML=((allNum-5)+i); }else{ // pageA.innerHTML= '['+ ((allNum-5)+i) +']' pageA.innerHTML= ((allNum-5)+i) } }else{ if(nowNum === (nowNum-3+i)){ pageA.className= 'Paging-item Paging-item-active' pageA.innerHTML= (nowNum-3+i); }else{ // pageA.innerHTML= '['+ (nowNum-3+i) +']' pageA.innerHTML= (nowNum-3+i) } } this.Box.appendChild(pageA); } } if((allNum-nowNum) >=1){ var pageA= document.createElement('a'); pageA.className= 'Paging-item Paging-item-next' pageA.href='#'+ (nowNum+1); pageA.innerHTML= '下一页'; this.Box.appendChild(pageA); } //选择7为标准，或7以下才能显示 if((allNum-nowNum) >= 3 && allNum >= 6){ var pageA= document.createElement('a'); pageA.className= 'Paging-item Paging-item-end' pageA.href='#'+allNum; pageA.innerHTML= '尾页'; this.Box.appendChild(pageA); } }, /*为UI绑定事件*/ bindUI: function(){ var self= this; this.config.callback(this.config.nowNum,this.config.allNum); //利用事件委托 self.Box.onclick= function(e){ var e= e || window.event; var target= e.target || e.srcElement; if(typeof e.target.getAttribute('href') === 'string'){ var nowNum= parseInt(target.getAttribute('href').substring(1)); // console.log(nowNum); self.Box.innerHTML= ''; new Paging(null,{ nowNum: nowNum, allNum: self.config.allNum, callback: self.config.callback }) } return false; } }, /*渲染UI*/ render: function(container){ this.renderUI(); this.bindUI(); if(container){ var con= document.getElementById(container); con.appendChild(this.Box); }else{ document.body.appendChild(this.Box); } }, /*继承对象*/ extend: function(obj1,obj2){ for(attr in obj2){ obj1[attr]= obj2[attr]; } } } //初始化调用 var page= new Paging(null,{ nowNum: 1, allNum: 10, callback: function(nowNum,allNum){ console.log('当前页：'+nowNum) console.log('总页：'+allNum) } }); </script> </html>