原生js编写基于面向对象的分页组件

网络编程 2025/11/2 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

本文实例为大家分享了一个基于面向对象的分页组件的具体实现代码，供大家参考，具体内容如下

文字表达有限，直接上代码了

<!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 id="page"></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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,分页组件

标签：

js,分页组件

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“原生js编写基于面向对象的分页组件”

暂无原生js编写基于面向对象的分页组件的评论...

原生js编写基于面向对象的分页组件

js,分页组件

详解Vue.js——60分钟组件快速入门（上篇）

8 行 Node.js 代码实现代理服务器

评论“原生js编写基于面向对象的分页组件”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接