二十一、面向对象案例

技术2025-08-08 10

面向对象框架格式

下面以自动轮播图（插件）为例写插件潜规则：构造函数中保存标签等属性，原型方法中使用一个个功能

创建构造函数，构造函数中保存标签等属性，原型方法中使用一个个功能

function Lbt(el) { //------------------------- el element 元素也就是获取页面中的标签对象（大盒子） this.el = document.querySelector(el)// -------------------------------------保存父标签 this.num=1 //-------------------------将轮播图图片序号初始化 this.t=null //----------------------------承接定时器的变量 this.init() // ----------------------------启动插件（启动器） } Lbt.prototype.init = function() { // -----------------------------调用轮播图所有功能的方法全部封装在启动器中 //---------------------注意：构造函数中的this == 创建的对象 this.changeImg()//-----------------调用图片自动轮播方法 this.setYQ() // --------------------调用同步圆点随图片自动轮播方法 this.yqOver() //----------------调用鼠标移入停止轮播方法 this.yqOut() //-------------------调用鼠标移出继续轮播的方法 } Lbt.prototype.changeImg = function() {}//------向构造函数Lbt()中封装图片自动轮播的方法 Lbt.prototype.setYQ = function() {}//------向构造函数Lbt()中封装圆点同步图片的方法 Lbt.prototype.yqOver= function() {}//------向构造函数Lbt()中封装鼠标移入停止轮播方法 Lbt.prototype.yqOut= function() {}//------向构造函数Lbt()中封装鼠标移出继续轮播的方法

上面是面向对象写轮播图的大概框架，下面是实际代码

轮播图

html结构部分

js功能部分

function Lbt(el){ this.el=document.querySelector(el)//获取页面中的标签对象（大盒子） this.num=1 //将图片序号初始化 this.t=null //承接定时器的变量 this.init() //启动插件 } Lbt.prototype.init=function(){ //调用轮播图所有功能的方法全部封装在启动器中 this.changeImg() //调用图片自动轮播的方法 this.changeYq() //调用圆点同步图片的方法 this.yqOver() //调用鼠标移入停止轮播， this.yqOut() //调用鼠标移出继续轮播的方法 } Lbt.prototype.changeImg=function(){ //封装图片自动轮播的方法 this.t=setInterval(()=>{ this.num++ if(this.num==7)this.num=1 let imgObj=this.el.querySelector("img") imgObj.src=`./images/img${this.num}.jpg` this.changeYq() },1000) } Lbt.prototype.changeYq=function(){ //封装圆点同步图片的方法 let ypObj=this.el.querySelectorAll("ul li") ypObj.forEach((item,index)=>{ item.removeAttribute("class") }); ypObj[this.num-1].setAttribute("class","active") } Lbt.prototype.yqOver=function(){ //调用鼠标移入停止轮播方法 let boxObj=document.querySelector("div") boxObj.onmouseover=()=>{ clearInterval(this.t) } } Lbt.prototype.yqOut=function(){ //调用鼠标移出继续轮播的方法 let boxObj=document.querySelector("div") boxObj.onmouseout=()=>{ this.changeImg() } }

效果图

tab选项卡

html结构部分

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>神龙教主</title> <style> * {margin: 0;padding: 0;} ul, ol, li {list-style: none;} .box {width: 600px;height: 400px;border: 10px solid #333;margin: 30px auto; display: flex;flex-direction: column;} .box > ul { width: 100%; height: 40px;display: flex; } .box > ul > li {flex: 1;display: flex;justify-content: center;align-items: center;font-size: 30px;color: #fff;background-color: hotpink;} .box > ul > li.active {background-color: orange;} .box > ol {flex: 1;position: relative;} .box > ol > li {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: skyblue;color: #fff;font-size: 100px;display: flex;justify-content: center;align-items: center;display: none;} .box > ol > li.active {display: flex;} </style> </head> <body>  <div class="box box1">  <ul> <li class="active">1</li> <li>2</li> <li>3</li> </ul>  <ol> <li class="active">1</li> <li>2</li> <li>3</li> </ol> </div>  <div class="box box2">  <ul> <li class="active">1</li> <li>2</li> <li>3</li> </ul>  <ol> <li class="active">1</li> <li>2</li> <li>3</li> </ol> </div>  <div class="box box3">  <ul> <li class="active">1</li> <li>2</li> <li>3</li> </ul>  <ol> <li class="active">1</li> <li>2</li> <li>3</li> </ol> </div> <script src="./tab.js"></script> <script> let tab1 = new Tab('.box1') let tab2 = new Tab('.box2') let tab3 = new Tab('.box3') </script>

js功能部分：

function Tab(el) { // element 标签 // 构造函数中一般保存插件的属性 this.el = document.querySelector(el) // 当前移入的下标 this.index = 0 // 默认启动(启动器) this.init() } Tab.prototype.init = function() { // 1. Tab头移入绑定事件 this.over() // 2. Tab头移除所有class，给当前加 // 3. Tab内容移除所有class，给当前加 } // Tab头移入绑定事件 Tab.prototype.over = function() { // 获取所有UL LI let ulLiObjs = this.el.querySelectorAll('ul li') // 遍历 ulLiObjs.forEach((item, index) => { // 绑定移入事件 // item.addEventListener('mouseover', function() { item.addEventListener('mouseover', () => { // 1. 保存当前下标 this.index = index // 2. 调用Tab头移除所有class，给当前加样式的方法 this.tabHeaderChange() // 3. 调用Tab内容移除所有class，给当前加样式的方法 this.tabMainChange() }) }) } // 2. 封装Tab头移除所有class，给当前加样式的方法 Tab.prototype.tabHeaderChange = function(){ // 获取 let tabHeaderObjs = this.el.querySelectorAll('ul li') // 遍历移除 tabHeaderObjs.forEach((item, index) =>{ item.removeAttribute('class') }) // 给当前的加 tabHeaderObjs[this.index].setAttribute('class', 'active') } // 3. 封装Tab内容移除所有class，给当前加样式的方法 Tab.prototype.tabMainChange = function() { // 获取 let tabMainObjs = this.el.querySelectorAll('ol li') // 遍历移除 tabMainObjs.forEach((item, index) =>{ item.removeAttribute('class') }) // 给当前的加 tabMainObjs[this.index].setAttribute('class', 'active') }

效果图：

（分页效果）实战案例细分析

■分页（面向过程）初始化思路

步骤1：在页面写一个div标签步骤2：通过css增加样式（w800 h40 border 1px 实现黑色外边距 30px 居中）

结构代码：

分页标签(展示)

let pageTag = { first: ‘首页’, prev: ‘上一页’, list: null, // 后期放分页页码 next: ‘下一页’, last: ‘末页’, };

思路

步骤1：通过forin来遍历对象目的动态创建p标签步骤2：在循环体中 1-创建p标签， 2-创建内容， 3-将内容追加到p标签中， 4-给p设置样式（m 0 5 \ p 0 5 \ b 1 黑 \ d inline-block） 5-将p标签追加到div标签对象里面

分页标签代码

分页页码（难 - 1显示页码）

需求：将页码（1-100）创建出来，然后放到null这个标签里面 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓效果如下↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓效果如下↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

let pageInfo = {// 分页页码的数据 pageNum: 15, // 当前页数 pageSize: 10, // 每页显示条数 totalData: 1000, // 总条数 totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数） } pageInfo.totalPage = Math.ceil(pageInfo.totalData / pageInfo.pageSize)

思路

步骤1：获取null标签对象（目的：后期分页页码都放到这个里面）步骤2：通过for循环遍历（起始位置1，最大值<=pageInfo.totalPage） 1-创建p标签， 2-创建内容， 3-将内容追加到p标签中， 4-给p设置样式（m 0 5 \ p 0 5 \ b 1 黑 \ d inline-block） 5-将p标签追加到【null标签对象】里面

代码

分页页码（难 - 2省略号）

分页标签(点击首页,尾页,禁用上一页,下一页)

思路

分页标签创建后如果pageInfo.pageNum==1 禁用首页和上一页如果pageInfo.pageNum==pageInfo.totalPage 禁用下一页和尾页注：background:#ccc

代码

分页事件事件委托概念：顾名思义就是将事件委托给父元素

作用：当页面节点是通过js动态增加时，发现新增的标签没有事件，但需求要，解决通过事件委托

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <button>按钮</button> <script> // 需求：点击按钮动态增加li标签 let btnObj = document.querySelector('button') btnObj.addEventListener('click', () => { // 创建li标签 let liObj = document.createElement('li') let textObj = document.createTextNode('神龙教主') liObj.appendChild(textObj) // 放到ul中 let ulObj = document.querySelector('ul') ulObj.appendChild(liObj) }) // 需求：点击li动态获取里面内容 // 获取所有li 遍历挨个增加点击事件 -> 获取里面内容 // let liObjs = document.querySelectorAll('li') // 数组数组里面是一个个li标签对象 // liObjs.forEach((item, index)=> { // // item 就是一个个li标签对象 // item.addEventListener('click', function(){ // // this 事件源 item li // alert(this.innerHTML) // }) // }) // 发现：上述代码用js增加的节点没有事件，委托给父 let ulObj = document.querySelector('ul') ulObj.addEventListener('click', function(e) { // this ulObj // 要获取li li就是事件源你点击的元素 // 思考：会不会有li以外的？ // 回答：有只要在ul中就有 e = e || window.event // 事件源 let target = e.target console.log(target) console.log(target.nodeName) //获取节点名称 // 切记：li大写 if (target.nodeName == 'LI') { alert(target.innerHTML) } }) </script>

思路

步骤1：将创建分页标签封装起来步骤2：将创建分页页码封装起来步骤3：给div设置点击事件（事件委拖）步骤4：在处理函数中判断是否是分页页码和分页标签不是 - 不管是 - 1更改全局的当前第几页 pageInfo.pageNum,2-重新渲染/展示页码

面向过程总体代码:

分页（面向对象）

明确需求传统：面向过程代码写两遍（代码冗余、不便于维护）

封装：过程代码丢到函数里（内存占用）

面向对象：减少代码冗余，便于后期维护，减少内存占用

确定调用语法明确：js插件就是用js代码写好的功能（例如：轮播图、分页等）

举例：swiper 移动滑动插件（js插件）

回忆swiper插件使用需求：参考Swiper封装Pagination插件

let page1 = new Pagination（分页范围选择器，{ // 分页标签 pageTag : { first: '首页', prev: '上一页', list: null, next: '下一页', last: '末页', }, // 分页页码的数据 pageInfo = { pageNum: 100, pageSize: 10, totalData: 1000 } }）

面向对象代码：

HTML结构部分

js功能部分

// function Pagination(el, options) // { // // 一、保存全局数据 // // 二、调用 // this.setFatherStyle() // this.this.createPageTag() // -> this.createPageNum() // } // // 二、搞标签 // // 三、搞页码 function Pagination(el, options) { // 一、保存全局数据 this.el = document.querySelector(el) options.pageInfo.totalPage = Math.ceil(options.pageInfo.totalData / options.pageInfo.pageSize) this.options = options this.nullObj // 定义null标签对象（目的：存放分页页码数据） // 二、调用 this.setFatherStyle() this.createPageTag() // -> this.createPageNum() } // 2.1、搞标签 Pagination.prototype.setFatherStyle = function() { let divObj = this.el let pageInfo = this.options.pageInfo let pageTag = this.options.pageTag // let divObj = document.querySelector('div') divObj.style.display = 'flex' divObj.style.justifyContent = 'center' divObj.style.alignItems = 'center' // divObj.addEventListener('click', function(evt){ // this事件源 divObj.addEventListener('click', (evt) => { // this新对象 let e = evt || window.event let tagValue = e.target.innerHTML if (tagValue == pageTag.first) { pageInfo.pageNum = 1 this.createPageTag() } if ( tagValue == pageTag.prev && pageInfo.pageNum > 1 ) { pageInfo.pageNum = parseInt(pageInfo.pageNum) - 1 this.createPageTag() } if (parseInt(tagValue)) { pageInfo.pageNum = parseInt(tagValue) this.createPageTag() } if ( tagValue == pageTag.next && pageInfo.pageNum < pageInfo.totalPage ) { pageInfo.pageNum = parseInt(pageInfo.pageNum) + 1 this.createPageTag() } if (tagValue == pageTag.last) { pageInfo.pageNum = pageInfo.totalPage this.createPageTag() } }) } // 2.2、搞标签 Pagination.prototype.createPageTag = function() { let divObj = this.el let pageTag = this.options.pageTag let pageInfo = this.options.pageInfo //======================= divObj.innerHTML = '' // 改变当前页了，需要重新渲染 //======================= // 1. 先遍历pageTag对象（目的：创建分页标签p） for (let tag in pageTag) {// tag是对象的键 pageTag[tag]是对象的值 // 2. 搞分页标签 // 2.1 创建p标签 let pObj = document.createElement('p') if (tag!='list') { // 2.2 创建内容 let textObj = document.createTextNode(pageTag[tag]) // 2.3 2.2 加到 2.1 中 pObj.appendChild(textObj) // 2.4 设置p标签样式 // pObj.style.display = 'inline-block' pObj.style.margin = '0 5px' pObj.style.padding = '0 5px' pObj.style.border = 'solid 1px black' } // 2.5 放到div里面 divObj.appendChild(pObj) } // 禁用 // let divPtagObj = document.querySelectorAll('div p') let divPtagObj = divObj.querySelectorAll('p') // pageInfo.pageNum == 1 禁用首页上一页 if (pageInfo.pageNum == 1) { divPtagObj[0].style.background = '#ccc' divPtagObj[1].style.background = '#ccc' } // pageInfo.pageNum == pageInfo.totalPage 禁用下一页末页 if (pageInfo.pageNum == pageInfo.totalPage) { divPtagObj[3].style.background = '#ccc' divPtagObj[4].style.background = '#ccc' } //======================== this.createPageNum() // 必须分页标签好了在创建分页页码 //======================== } // 2.3、搞页码 Pagination.prototype.createPageNum = function() { let divObj = this.el let pageInfo = this.options.pageInfo // 1. 获取null标签对象 // nullObj = document.querySelector('div p:nth-child(3)') this.nullObj = divObj.querySelector(' p:nth-child(3)') // 2. 按照规则创建分页页码而且还要有省略号 // pageNum<5 1 2 3 4 5 ... 99 100 // pageNum==5 1 2 3 4 5 6 7 ... 99 100 // pageNum>5 && pageNum < 总页数-4 1 2 ... 4 5 [6] 7 8 ... 99 100 // pageNum >= 总页数-4 1 2 ... 96 97 98 99 100 if (pageInfo.pageNum<5) { for (let i = 1; i<=5; i++) this.createP(i) this.createP('...', 'span') this.createP(pageInfo.totalPage - 1) this.createP(pageInfo.totalPage) } else if (pageInfo.pageNum==5) { for (let i = 1; i<=7; i++) this.createP(i) this.createP('...', 'span') this.createP(pageInfo.totalPage - 1) this.createP(pageInfo.totalPage) } else if (pageInfo.pageNum>5 && pageInfo.pageNum < pageInfo.totalPage - 4) { this.createP(1) this.createP(2) this.createP('...', 'span') for (let i = pageInfo.pageNum-2; i<=pageInfo.pageNum+2; i++) this.createP(i) this.createP('...', 'span') this.createP(pageInfo.totalPage - 1) this.createP(pageInfo.totalPage) } else if (pageInfo.pageNum >= pageInfo.totalPage - 4) { this.createP(1) this.createP(2) this.createP('...', 'span') for (let i = pageInfo.totalPage-4; i<=pageInfo.totalPage; i++) this.createP(i) } } Pagination.prototype.createP = function(content, tag= 'p') { let pageInfo = this.options.pageInfo // 2.1 创建p标签 let pObj = document.createElement(tag) // 2.2 创建内容 let textObj = document.createTextNode(content) // 2.3 2.2 加到 2.1 中 pObj.appendChild(textObj) // 2.4 设置p标签样式 pObj.style.display = 'inline-block' pObj.style.margin = '0 5px' pObj.style.padding = '0 5px' pObj.style.border = 'solid 1px black' if (content == pageInfo.pageNum) pObj.style.background = 'orange' // 放到 nullObj 中 this.nullObj.appendChild(pObj) }

回调函数回调：顾名思义就是回头调用的函数

需求：当你每次点击分页后，调用函数，一个实参当前页（注：函数在配置中定义） html

<div class="page1"></div>  <script src="pagination.js"></script> <script> let pageN = new Pagination('.page1',{ // 分页标签 pageTag : { first: '首页', prev: '上一页', list: null, next: '下一页', last: '末页', }, // 分页页码的数据 pageInfo : { pageNum: 1, pageSize: 10, totalData: 1000 }, // 点击分页，触发该函数 // ES5 changePage: function() {} // ES6 changePage(currentPageNum) { console.log(currentPageNum) } }) // let page2 = new Pagination('.page2',{ // // 分页标签 // pageTag : { // first: 'first', // prev: 'prev', // list: null, // next: 'next', // last: 'last', // }, // // 分页页码的数据 // pageInfo : { // pageNum: 100, // pageSize: 10, // totalData: 1000 // } // }) </script>

js功能

// function Pagination(el, options) // { // // 一、保存全局数据 // // 二、调用 // this.setFatherStyle() // this.this.createPageTag() // -> this.createPageNum() // } // // 二、搞标签 // // 三、搞页码 function Pagination(el, options) { // 一、保存全局数据 this.el = document.querySelector(el) options.pageInfo.totalPage = Math.ceil(options.pageInfo.totalData / options.pageInfo.pageSize) this.options = options this.nullObj // 定义null标签对象（目的：存放分页页码数据） // 二、调用 this.setFatherStyle() this.createPageTag() // -> this.createPageNum() } // 2.1、搞标签 Pagination.prototype.setFatherStyle = function() { let divObj = this.el let pageInfo = this.options.pageInfo let pageTag = this.options.pageTag // let divObj = document.querySelector('div') divObj.style.display = 'flex' divObj.style.justifyContent = 'center' divObj.style.alignItems = 'center' // divObj.addEventListener('click', function(evt){ // this事件源 divObj.addEventListener('click', (evt) => { // this新对象 let e = evt || window.event let tagValue = e.target.innerHTML if (tagValue == pageTag.first) { pageInfo.pageNum = 1 this.createPageTag() } if ( tagValue == pageTag.prev && pageInfo.pageNum > 1 ) { pageInfo.pageNum = parseInt(pageInfo.pageNum) - 1 this.createPageTag() } if (parseInt(tagValue)) { pageInfo.pageNum = parseInt(tagValue) this.createPageTag() } if ( tagValue == pageTag.next && pageInfo.pageNum < pageInfo.totalPage ) { pageInfo.pageNum = parseInt(pageInfo.pageNum) + 1 this.createPageTag() } if (tagValue == pageTag.last) { pageInfo.pageNum = pageInfo.totalPage this.createPageTag() } }) } // 2.2、搞标签 Pagination.prototype.createPageTag = function() { let divObj = this.el let pageTag = this.options.pageTag let pageInfo = this.options.pageInfo //======================= divObj.innerHTML = '' // 改变当前页了，需要重新渲染 //======================= // 1. 先遍历pageTag对象（目的：创建分页标签p） for (let tag in pageTag) {// tag是对象的键 pageTag[tag]是对象的值 // 2. 搞分页标签 // 2.1 创建p标签 let pObj = document.createElement('p') if (tag!='list') { // 2.2 创建内容 let textObj = document.createTextNode(pageTag[tag]) // 2.3 2.2 加到 2.1 中 pObj.appendChild(textObj) // 2.4 设置p标签样式 // pObj.style.display = 'inline-block' pObj.style.margin = '0 5px' pObj.style.padding = '0 5px' pObj.style.border = 'solid 1px black' } // 2.5 放到div里面 divObj.appendChild(pObj) } // 禁用 // let divPtagObj = document.querySelectorAll('div p') let divPtagObj = divObj.querySelectorAll('p') // pageInfo.pageNum == 1 禁用首页上一页 if (pageInfo.pageNum == 1) { divPtagObj[0].style.background = '#ccc' divPtagObj[1].style.background = '#ccc' } // pageInfo.pageNum == pageInfo.totalPage 禁用下一页末页 if (pageInfo.pageNum == pageInfo.totalPage) { divPtagObj[3].style.background = '#ccc' divPtagObj[4].style.background = '#ccc' } //======================== this.createPageNum() // 必须分页标签好了在创建分页页码 //======================== } // 2.3、搞页码 Pagination.prototype.createPageNum = function() { let divObj = this.el let pageInfo = this.options.pageInfo // 1. 获取null标签对象 // nullObj = document.querySelector('div p:nth-child(3)') this.nullObj = divObj.querySelector(' p:nth-child(3)') // 2. 按照规则创建分页页码而且还要有省略号 // pageNum<5 1 2 3 4 5 ... 99 100 // pageNum==5 1 2 3 4 5 6 7 ... 99 100 // pageNum>5 && pageNum < 总页数-4 1 2 ... 4 5 [6] 7 8 ... 99 100 // pageNum >= 总页数-4 1 2 ... 96 97 98 99 100 if (pageInfo.pageNum<5) { for (let i = 1; i<=5; i++) this.createP(i) this.createP('...', 'span') this.createP(pageInfo.totalPage - 1) this.createP(pageInfo.totalPage) } else if (pageInfo.pageNum==5) { for (let i = 1; i<=7; i++) this.createP(i) this.createP('...', 'span') this.createP(pageInfo.totalPage - 1) this.createP(pageInfo.totalPage) } else if (pageInfo.pageNum>5 && pageInfo.pageNum < pageInfo.totalPage - 4) { this.createP(1) this.createP(2) this.createP('...', 'span') for (let i = pageInfo.pageNum-2; i<=pageInfo.pageNum+2; i++) this.createP(i) this.createP('...', 'span') this.createP(pageInfo.totalPage - 1) this.createP(pageInfo.totalPage) } else if (pageInfo.pageNum >= pageInfo.totalPage - 4) { this.createP(1) this.createP(2) this.createP('...', 'span') for (let i = pageInfo.totalPage-4; i<=pageInfo.totalPage; i++) this.createP(i) } //========================= // 页码渲染完毕调用 this.options.changePage(this.options.pageInfo.pageNum) } Pagination.prototype.createP = function(content, tag= 'p') { let pageInfo = this.options.pageInfo // 2.1 创建p标签 let pObj = document.createElement(tag) // 2.2 创建内容 let textObj = document.createTextNode(content) // 2.3 2.2 加到 2.1 中 pObj.appendChild(textObj) // 2.4 设置p标签样式 pObj.style.display = 'inline-block' pObj.style.margin = '0 5px' pObj.style.padding = '0 5px' pObj.style.border = 'solid 1px black' if (content == pageInfo.pageNum) pObj.style.background = 'orange' // 放到 nullObj 中 this.nullObj.appendChild(pObj) }

分页两种形式

- 服务端分页：你传递当前第几页和每页显示条数给java 它来计算返回对应也的数据给你 - 客户端分页*：java把数据库数据全部给你，你实现分页效果（1-数据全给你，2-根据情况显示）

实现分页中插入数据（数据准备）

实现分页（输出下述需求数据）

每页10条

第一页 1-10

第二页 11-20

第三页 21-30

优化：定义定义pageNum变量，动态输出

<table border="1" cellspacing="0"> <thead> <tr> <th>序号</th> <th>学生ID</th> <th>学生姓名</th> <th>学生年龄</th> <th>学生性别</th> <th>学生班级</th> <th>学生成绩</th> </tr> </thead> <tbody></tbody> </table> <script> // 用来准备数据 const firstName = '赵钱孙李周吴郑王冯陈楚魏将沈韩杨朱琴尤许何吕施章' const laseName = '氢氦锂铍硼碳氮氧氟氖钠镁铝硅磷硫氯氩钾钙' const thirdName = '一二三四五六七八九十' const gender = '男女' const fn = (a, b) => Math.floor(Math.random() * (b - a + 1)) + a const tableDataArr = [] for (let i = 0; i <= 1000; i++) { tableDataArr.push({ id: i + 1, name: firstName[fn(0, 23)] + laseName[fn(0, 19)] + thirdName[fn(0, 9)], age: fn(16, 30), gender: gender[fn(0, 1)], class: fn(1910, 1920), score: fn(40, 100) }) } console.log(tableDataArr) /* 已知：当前页pageNum 第一页开始位置 0 终止 10 (1-1)*10=0 第二页开始位置 10 终止 20 (2-1)*10=10 第三页开始位置 20 终止 30 (3-1)*10=20 开始位置分页固定公式：（当前页 - 1） * 每页显示条数终止位置公式：开始位置 + 每页显示条数 */ // 需求：不要每次该多个东西，改的头疼 // 直接声明pageNum变量从而显示对应页数据 let pageNum = 4 let pageSize = 10 let startno = (pageNum - 1) * pageSize // 1. 获取tbody let tbodyObj = document.querySelector('tbody') // 2. 通过for循环拼接每页数据 let html = `` // for (let i = 0; i<10; i++) { //第一页 1-10 // for (let i = 10; i<20; i++) { //第二页 11-20 // for (let i = 20; i<30; i++) { //第三页 21-30 for (let i = startno; i<startno+pageSize; i++) { // 每条数据 tableDataArr[i] 对象 html += ` <tr> <td>${i}</td> <td>${tableDataArr[i].id}</td> <td>${tableDataArr[i].name}</td> <td>${tableDataArr[i].age}</td> <td>${tableDataArr[i].gender}</td> <td>${tableDataArr[i].class}</td> <td>${tableDataArr[i].score}</td> </tr> ` } // 3. 放到tbody中 tbodyObj.innerHTML = html </script>

分页最终版（带数据）

html

<table border="1" cellspacing="0"> <thead> <tr> <th>序号</th> <th>学生ID</th> <th>学生姓名</th> <th>学生年龄</th> <th>学生性别</th> <th>学生班级</th> <th>学生成绩</th> </tr> </thead> <tbody></tbody> </table> <div class="page"></div> <script src="./pagination.js"></script> <script> // 用来准备数据 const firstName = '赵钱孙李周吴郑王冯陈楚魏将沈韩杨朱琴尤许何吕施章' const laseName = '氢氦锂铍硼碳氮氧氟氖钠镁铝硅磷硫氯氩钾钙' const thirdName = '一二三四五六七八九十' const gender = '男女' const fn = (a, b) => Math.floor(Math.random() * (b - a + 1)) + a const tableDataArr = [] for (let i = 0; i <= 1000; i++) { tableDataArr.push({ id: i + 1, name: firstName[fn(0, 23)] + laseName[fn(0, 19)] + thirdName[fn(0, 9)], age: fn(16, 30), gender: gender[fn(0, 1)], class: fn(1910, 1920), score: fn(40, 100) }) } console.log(tableDataArr) // 分页显示数据 let page = new Pagination('.page', { // 分页标签 pageTag : { first: '首页', prev: '上一页', list: null, next: '下一页', last: '末页', }, // 分页页码的数据 pageInfo : { pageNum: 5, pageSize: 10, totalData: tableDataArr.length }, // 点击分页触发 changePage(currentPageNum) { console.log(currentPageNum) // 1. 获取tbody let tbodyObj = document.querySelector('tbody') // 2. 遍历显示数据，（当前页-1）*每页显示条数 let startno = (currentPageNum-1) * this.pageInfo.pageSize let html = `` // for (let i = 开始位置; i<终止; i++) { for (let i = startno; i<startno+this.pageInfo.pageSize; i++) { // 每条数据 tableDataArr[i] 对象 html += ` <tr> <td>${i}</td> <td>${tableDataArr[i].id}</td> <td>${tableDataArr[i].name}</td> <td>${tableDataArr[i].age}</td> <td>${tableDataArr[i].gender}</td> <td>${tableDataArr[i].class}</td> <td>${tableDataArr[i].score}</td> </tr> ` } // 3. 放到tbody中 tbodyObj.innerHTML = html } }) </script>

js功能

// function Pagination(el, options) // { // // 一、保存全局数据 // // 二、调用 // this.setFatherStyle() // this.this.createPageTag() // -> this.createPageNum() // } // // 二、搞标签 // // 三、搞页码 function Pagination(el, options) { // 一、保存全局数据 this.el = document.querySelector(el) options.pageInfo.totalPage = Math.ceil(options.pageInfo.totalData / options.pageInfo.pageSize) this.options = options this.nullObj // 定义null标签对象（目的：存放分页页码数据） // 二、调用 this.setFatherStyle() this.createPageTag() // -> this.createPageNum() } // 2.1、搞标签 Pagination.prototype.setFatherStyle = function() { let divObj = this.el let pageInfo = this.options.pageInfo let pageTag = this.options.pageTag // let divObj = document.querySelector('div') divObj.style.display = 'flex' divObj.style.justifyContent = 'center' divObj.style.alignItems = 'center' // divObj.addEventListener('click', function(evt){ // this事件源 divObj.addEventListener('click', (evt) => { // this新对象 let e = evt || window.event let tagValue = e.target.innerHTML if (tagValue == pageTag.first) { pageInfo.pageNum = 1 this.createPageTag() // this.options.changePage(pageInfo.pageNum) } if ( tagValue == pageTag.prev && pageInfo.pageNum > 1 ) { pageInfo.pageNum = parseInt(pageInfo.pageNum) - 1 this.createPageTag() // this.options.changePage(pageInfo.pageNum) } if (parseInt(tagValue)) { pageInfo.pageNum = parseInt(tagValue) this.createPageTag() // this.options.changePage(pageInfo.pageNum) } if ( tagValue == pageTag.next && pageInfo.pageNum < pageInfo.totalPage ) { pageInfo.pageNum = parseInt(pageInfo.pageNum) + 1 this.createPageTag() // this.options.changePage(pageInfo.pageNum) } if (tagValue == pageTag.last) { pageInfo.pageNum = pageInfo.totalPage this.createPageTag() // this.options.changePage(pageInfo.pageNum) } }) } // 2.2、搞标签 Pagination.prototype.createPageTag = function() { let divObj = this.el let pageTag = this.options.pageTag let pageInfo = this.options.pageInfo //======================= divObj.innerHTML = '' // 改变当前页了，需要重新渲染 //======================= // 1. 先遍历pageTag对象（目的：创建分页标签p） for (let tag in pageTag) {// tag是对象的键 pageTag[tag]是对象的值 // 2. 搞分页标签 // 2.1 创建p标签 let pObj = document.createElement('p') if (tag!='list') { // 2.2 创建内容 let textObj = document.createTextNode(pageTag[tag]) // 2.3 2.2 加到 2.1 中 pObj.appendChild(textObj) // 2.4 设置p标签样式 // pObj.style.display = 'inline-block' pObj.style.margin = '0 5px' pObj.style.padding = '0 5px' pObj.style.border = 'solid 1px black' } // 2.5 放到div里面 divObj.appendChild(pObj) } // 禁用 // let divPtagObj = document.querySelectorAll('div p') let divPtagObj = divObj.querySelectorAll('p') // pageInfo.pageNum == 1 禁用首页上一页 if (pageInfo.pageNum == 1) { divPtagObj[0].style.background = '#ccc' divPtagObj[1].style.background = '#ccc' } // pageInfo.pageNum == pageInfo.totalPage 禁用下一页末页 if (pageInfo.pageNum == pageInfo.totalPage) { divPtagObj[3].style.background = '#ccc' divPtagObj[4].style.background = '#ccc' } //======================== this.createPageNum() // 必须分页标签好了在创建分页页码 //======================== } // 2.3、搞页码 Pagination.prototype.createPageNum = function() { let divObj = this.el let pageInfo = this.options.pageInfo // 1. 获取null标签对象 // nullObj = document.querySelector('div p:nth-child(3)') this.nullObj = divObj.querySelector(' p:nth-child(3)') // 2. 按照规则创建分页页码而且还要有省略号 // pageNum<5 1 2 3 4 5 ... 99 100 // pageNum==5 1 2 3 4 5 6 7 ... 99 100 // pageNum>5 && pageNum < 总页数-4 1 2 ... 4 5 [6] 7 8 ... 99 100 // pageNum >= 总页数-4 1 2 ... 96 97 98 99 100 if (pageInfo.pageNum<5) { for (let i = 1; i<=5; i++) this.createP(i) this.createP('...', 'span') this.createP(pageInfo.totalPage - 1) this.createP(pageInfo.totalPage) } else if (pageInfo.pageNum==5) { for (let i = 1; i<=7; i++) this.createP(i) this.createP('...', 'span') this.createP(pageInfo.totalPage - 1) this.createP(pageInfo.totalPage) } else if (pageInfo.pageNum>5 && pageInfo.pageNum < pageInfo.totalPage - 4) { this.createP(1) this.createP(2) this.createP('...', 'span') for (let i = pageInfo.pageNum-2; i<=pageInfo.pageNum+2; i++) this.createP(i) this.createP('...', 'span') this.createP(pageInfo.totalPage - 1) this.createP(pageInfo.totalPage) } else if (pageInfo.pageNum >= pageInfo.totalPage - 4) { this.createP(1) this.createP(2) this.createP('...', 'span') for (let i = pageInfo.totalPage-4; i<=pageInfo.totalPage; i++) this.createP(i) } //========================= // 页码渲染完毕调用 this.options.changePage(this.options.pageInfo.pageNum) } Pagination.prototype.createP = function(content, tag= 'p') { let pageInfo = this.options.pageInfo // 2.1 创建p标签 let pObj = document.createElement(tag) // 2.2 创建内容 let textObj = document.createTextNode(content) // 2.3 2.2 加到 2.1 中 pObj.appendChild(textObj) // 2.4 设置p标签样式 pObj.style.display = 'inline-block' pObj.style.margin = '0 5px' pObj.style.padding = '0 5px' pObj.style.border = 'solid 1px black' if (content == pageInfo.pageNum) pObj.style.background = 'orange' // 放到 nullObj 中 this.nullObj.appendChild(pObj) }

Processed: 0.019, SQL: 9