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

2024-09-28 07:03:44

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

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

<!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创建对象的写法.分享给大家供大家参考,具体如下: 写法1: <script> var database = function () { function add(){ console.info("add"); } function queryAll(){ console.info("queryAll"); } /** 带参数 */ function delById(id){ console.info("delById:&quo
js实现倒计时及时间对象

JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title>h <style> #box { width: 100%; height: 400px; background: black; color: #fff; font-size:40px; line-height:400px; tex
Javascript之面向对象--接口

接口:对实现某一种任务.功能,目的等,所规定的一些原则. 程序中的接口:规定好有几个方法,方法名是什么.(因程序中要完成任务,都是通过函数或者说方法去实现的.) javascript中的接口:把实例出来的某"类型对象".和实例出来的"接口对象",进行一个比较,符合规则,就可以说:这个对象实现了规定的接口: (接口类:通过这个类,来实例出不同的接口.即不同的接口实例,也就是不同的方法个数和方法名称) (进行比较:其实质就是判断子类型实例出来的对象,是否有接口对象中所保
JS日期对象简单操作（获取当前年份、星期、时间）

本文实例为大家分享了JavaScript获取当前年份.星期.时间的方法,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //
JS动态给对象添加属性和值的实现方法

如下所示: var obj={}; for(var i=0;i<10;i++){ eval("obj.p"+i+"="+i); } 以上就是小编为大家带来的JS动态给对象添加属性和值的实现方法全部内容了,希望大家多多支持我们~
遍历json 对象的属性并且动态添加属性的实现

昨天因为公司的一个需求,所以就研究了一下json对象的属性的遍历和动态修改: var person= { name: 'zhangsan', pass: '123' , 'sni.ni' : 'sss', hello:function (){ for(var i=0;i<arguments.length;i++){ //在不知参数个数情况下可通过for循环遍历 // arguments这个是js 默认提供 alert("arr["+i+"]="+argumen
详解springmvc 接收json对象的两种方式

最近学习了springmvc 接收json对象的两种方式,现在整理出来,具体如下: 1.以实体类方式接收前端 ajax 提交数据: function fAddObj() { var obj = {}; obj['objname'] = "obj"; obj['pid'] = 1 ; $.ajax({ url: 'admin/Obj/addObj.do', method: 'post', contentType: 'application/json', // 这句不加出现415错误:U
JavaScript 判断一个对象{}是否为空对象的简单方法

做项目时遇到一个问题,判断一个对象是否为空对象,发现这样判断可以,上代码: 1. 代码1: var a = {}; if(!a){ console.log(1);} else if(a == null) { console.log(2);} else { console.log(3);} 结果为:3 2. 代码2: var b = {}; if(b == {}){ console.log(4);} if(b == '{}') { console.log(5);} if(typeof(b) ==
Javascript之面向对象--方法

JavaScript面向对象是近年来比较火的一个概念了,由于小弟才疏学浅,虽然做过不少的web项目,看了网上很多深奥的资料和教程,还是对他们深奥的理论一知半解,前段时间看了点书,总算有了自己的理解,今天也出来装一回,如果觉得很深奥,请直接鄙视我,如果觉得不对,请直接拍砖. 先通俗了解下面一些东西. 在JS代码中写入function fn(){}或者var fn=function(){}等等,你都可以将其理解为对象,当然还有数组等等. 在理解面向对象之前,先了解下面几个东西吧. 1.对象方法的调用
Javascript之面向对象--封装

第一步:做一个"手机的类" var MobilePhone = (function(){ ---- })() 第二步:考虑这个类,里需要那些类的私有属性,这里我想定义的是实例出来手机的数量 var MobilePhone = (function(){ //私有属性 var count = 0; //代表手机的数量 })() 第三步:创建一个构造函数,即实例时候,对产生的新象的一个初始化,例如属性,方法的初始化;在这个例子中,每一个手机都会有颜色,大小,价格属性.这里的构造函数也是一个闭
浅述Javascript的外部对象

Window 浏览器: - location:地址 - history:历史 - Document:文档 - screen:窗口 - navigator:帮助 > 1.外部对象就是浏览器提供的API -- **BOM** > 2.这些对象由w3c规定,由浏览器开发者设计并开发 > 3.这些对象分为2部分,其中BOM包含了DOM > 4.我们可以通过js访问这些对象 # 外部对象 > BOM (Browser Object Model) 浏览器对象模型,用来访问和操纵浏览器窗口
JavaScript 深层克隆对象详解及实例

JavaScript 深层克隆对象今天做项目,有个需求需要用到深层克隆对象,并且要求在原型链上编程于是心血来潮索性来复习一下这个知识点,在网上找了相应的知识, 克隆对象,这名词看着高大上,其实也没什么,便是拷贝一个长的一模一样的对象也许有初学的小伙伴在想,那还不简单么,so easy var obj1 = {name: 'payen'}; var obj2 = obj1; 这可并不是克隆对象,obj1和obj2根本就是同一个对象, 他俩指向同一个内存地址空间,拿到了同样的一个小房子这是

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

相关推荐

随机推荐