二十一、面向对象案例

最新推荐文章于 2021-06-30 19:16:02 发布
最新推荐文章于 2021-06-30 19:16:02 发布
阅读量241 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45256247/article/details/107124888
版权

面向对象框架格式

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

<style>       //-------------------------------------------轮播图样式
* {padding:0px;margin:0px;}
.box {width:500px;height:180px;overflow: hidden; position: relative;}
ul {
    list-style:none;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -60px;
}
ul li {
    float: left;
    width: 10px;
    height:10px;
    background: #fff;
    border-radius: 50%;
    margin-right: 10px;
     }
ul li.active {background: blue;}
</style>

<body>          //---------------------------------------轮播图元素结构
<div class="box">
    <img src="./imgs/img1.jpg" alt="">
    <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>  
</body>    
  
<script src="./lbt.js"></script> //-------------------------------------------------引入插件

  <script>
    let lbt1=new Lbt(".box")     //在构造函数Lbt()身上new一个对象，()内传入装轮播图的父元素，构造函数Lbt内写轮播图的所有功能
  </script>

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

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结构部分

<style>
    * {padding:0px;margin:0px;}
    .box {width:500px;height:280px;overflow: hidden; position: relative;}
    ul {
        list-style:none;
        position: absolute;
        bottom: 100px;
        left: 50%;
        margin-left: -60px;
    }
    ul li {
        float: left;
        width: 10px;
        height:10px;
        background: #fff;
        border-radius: 50%;
        margin-right: 10px;
    }
    ul li.active {background: blue;}
    </style>
    
    
    <div class="box">
        <img src="./images/img1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    
    <script src="./lbt.js"></script>
    <script>
    let lbt=new Lbt(".box")
    </script>

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>
    <!-- tab选项卡1 -->
    <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>

    
    <!-- tab选项卡2 -->
    <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>

    
    <!-- tab选项卡3 -->
    <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 居中）

结构代码：

<style>
div {
    width: 800px;
    height: 40px;
    border: solid 1px black;
    margin: 30px auto;
}
</style>

<div></div>

分页标签(展示)
在这里插入图片描述

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标签对象里面

分页标签代码

<style>
div {
    width: 800px;
    height: 40px;
    border: solid 1px black;
    margin: 30px auto;
}
</style>

<div></div>

<script>
// 一、全局变量
let pageTag = {
    first: '首页',
    prev: '上一页',
    list: null,     // 后期放分页页码
    next: '下一页',
    last: '末页',
};
let divObj = document.querySelector('div')
divObj.style.display = 'flex'
divObj.style.justifyContent = 'center'
divObj.style.alignItems = 'center'

// 二、显示分页标签
// 步骤1：通过forin来遍历对象  目的 动态创建p标签
for (let tag in pageTag) { // tag
    // console.log(tag) 对象的键tag 对象的值pageTag[tag]
    // 步骤2：在循环体中
    // 	1-创建p标签，
    let pObj = document.createElement('p')
    // 	2-创建内容，
    let textObj = document.createTextNode(pageTag[tag])
    // 	3-将内容追加到p标签中 ，
    pObj.appendChild(textObj)
    // 	4-给p设置样式（m 0 5 \ p 0 5 \ b 1 黑 \ d inline-block）
    pObj.style.margin = '0px 5px'
    pObj.style.padding = '0px 5px'
    pObj.style.border = '1px solid black'
    pObj.style.display = 'inline-block'
    // 	5-将p标签追加到div标签对象里面
    divObj.appendChild(pObj)
}
</script>

分页页码（难 - 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标签对象】里面

代码

<style>
div {
    width: 800px;
    height: 40px;
    border: solid 1px black;
    margin: 30px auto;
}
</style>

<div></div>

<script>
// 一、全局变量
let pageTag = {
    first: '首页',
    prev: '上一页',
    list: null,     // 后期放分页页码
    next: '下一页',
    last: '末页',
};

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

let divObj = document.querySelector('div')
divObj.style.display = 'flex'
divObj.style.justifyContent = 'center'
divObj.style.alignItems = 'center'

// 二、显示分页标签
// 步骤1：通过forin来遍历对象  目的 动态创建p标签
for (let tag in pageTag) { // tag
    // console.log(tag) 对象的键tag 对象的值pageTag[tag]
    // 步骤2：在循环体中
    // 	1-创建p标签，
    let pObj = document.createElement('p')

    // null标签对象不要内容和外边框
    if (tag != 'list')
    {
        // 	2-创建内容，
        let textObj = document.createTextNode(pageTag[tag])
        // 	3-将内容追加到p标签中 ，
        pObj.appendChild(textObj)
        // 	4-给p设置样式（m 0 5 \ p 0 5 \ b 1 黑 \ d inline-block）
        pObj.style.margin = '0px 5px'
        pObj.style.padding = '0px 5px'
        pObj.style.border = '1px solid black'
        pObj.style.display = 'inline-block'
    }
    // 	5-将p标签追加到div标签对象里面
    divObj.appendChild(pObj)
}

// 三、显示分页页码
// 步骤1：获取null标签对象（目的：后期分页页码都放到这个里面）
let nullObj = document.querySelector('div p:nth-child(3)')
// console.log(nullObj)
// 步骤2：通过for循环遍历（起始位置1，最大值<=pageInfo.totalPage）
// for (let i = 1; i<=pageInfo.totalPage; i++)
for (let i = 1; i<=10; i++)
{
    // 	1-创建p标签，
    let pObj = document.createElement('p')
    // 	2-创建内容，（注：i第几页）
    let textObj = document.createTextNode(i)
    // 	3-将内容追加到p标签中 ，
    pObj.appendChild(textObj)
    // 	4-给p设置样式（m 0 5 \ p 0 5 \ b 1 黑 \ d inline-block）
    pObj.style.margin = '0px 5px'
    pObj.style.padding = '0px 5px'
    pObj.style.border = '1px solid black'
    pObj.style.display = 'inline-block'
    // 	5-将p标签追加到【null标签对象】里面
    nullObj.appendChild(pObj)
}
</script>

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

<style>
div {
    width: 800px;
    height: 40px;
    border: solid 1px black;
    margin: 30px auto;
}
</style>

<div></div>

<script>
// 一、全局变量
let pageTag = {
    first: '首页',
    prev: '上一页',
    list: null,     // 后期放分页页码
    next: '下一页',
    last: '末页',
};

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

let divObj = document.querySelector('div')
divObj.style.display = 'flex'
divObj.style.justifyContent = 'center'
divObj.style.alignItems = 'center'

// 二、显示分页标签
// 步骤1：通过forin来遍历对象  目的 动态创建p标签
for (let tag in pageTag) { // tag
    // console.log(tag) 对象的键tag 对象的值pageTag[tag]
    // 步骤2：在循环体中
    // 	1-创建p标签，
    let pObj = document.createElement('p')

    // null标签对象不要内容和外边框
    if (tag != 'list')
    {
        // 	2-创建内容，
        let textObj = document.createTextNode(pageTag[tag])
        // 	3-将内容追加到p标签中 ，
        pObj.appendChild(textObj)
        // 	4-给p设置样式（m 0 5 \ p 0 5 \ b 1 黑 \ d inline-block）
        pObj.style.margin = '0px 5px'
        pObj.style.padding = '0px 5px'
        pObj.style.border = '1px solid black'
        pObj.style.display = 'inline-block'
    }
    // 	5-将p标签追加到div标签对象里面
    divObj.appendChild(pObj)
}

// 三、显示分页页码
// 步骤1：获取null标签对象（目的：后期分页页码都放到这个里面）
let nullObj = document.querySelector('div p:nth-child(3)')
// console.log(nullObj)
// 步骤2：通过for循环遍历（起始位置1，最大值<=pageInfo.totalPage）
// for (let i = 1; i<=pageInfo.totalPage; i++)
// for (let i = 1; i<=10; i++)
// {
//     // 	1-创建p标签，
//     let pObj = document.createElement('p')
//     // 	2-创建内容，（注：i第几页）
//     let textObj = document.createTextNode(i)
//     // 	3-将内容追加到p标签中 ，
//     pObj.appendChild(textObj)
//     // 	4-给p设置样式（m 0 5 \ p 0 5 \ b 1 黑 \ d inline-block）
//     pObj.style.margin = '0px 5px'
//     pObj.style.padding = '0px 5px'
//     pObj.style.border = '1px solid black'
//     pObj.style.display = 'inline-block'
//     // 	5-将p标签追加到【null标签对象】里面
//     nullObj.appendChild(pObj)
// }


// 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++) createP(i)
    createP('...', 'span')
    createP(pageInfo.totalPage - 1)
    createP(pageInfo.totalPage)

} else if (pageInfo.pageNum==5) {

    for (let i = 1; i<=7; i++) createP(i)
    createP('...', 'span')
    createP(pageInfo.totalPage - 1)
    createP(pageInfo.totalPage)

} else if (pageInfo.pageNum>5 && pageInfo.pageNum < pageInfo.totalPage-4) {

    for (let i = 1; i<=2; i++) createP(i)
    createP('...', 'span')
    for (let i = pageInfo.pageNum-2; i<=pageInfo.pageNum+2; i++) createP(i)
    createP('...', 'span')
    createP(pageInfo.totalPage - 1)
    createP(pageInfo.totalPage)

} else if (pageInfo.pageNum >= pageInfo.totalPage-4) {

    for (let i = 1; i<=2; i++) createP(i)
    createP('...', 'span')
    for (let i = pageInfo.totalPage-4; i<=pageInfo.totalPage; i++) createP(i)

}

function createP(content, tag = 'p')
{
    // 	1-创建p标签，
    // let pObj = document.createElement('p')
    let pObj = document.createElement(tag)
    // 	2-创建内容，（注：i第几页）
    // let textObj = document.createTextNode(i)
    let textObj = document.createTextNode(content)
    // 	3-将内容追加到p标签中 ，
    pObj.appendChild(textObj)
    // 	4-给p设置样式（m 0 5 \ p 0 5 \ b 1 黑 \ d inline-block）
    pObj.style.margin = '0px 5px'
    pObj.style.padding = '0px 5px'
    pObj.style.border = '1px solid black'
    pObj.style.display = 'inline-block'
    if (content == pageInfo.pageNum) pObj.style.background = 'orange'
    // 	5-将p标签追加到【null标签对象】里面
    nullObj.appendChild(pObj)
}
</script>

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

思路

分页标签创建后

如果pageInfo.pageNum==1  					禁用  首页 和 上一页
如果pageInfo.pageNum==pageInfo.totalPage  禁用 下一页 和 尾页

注：background:#ccc

代码

<style>
div {
    width: 800px;
    height: 40px;
    border: solid 1px black;
    margin: 30px auto;
}
</style>

<div></div>

<script>
// 一、全局变量
let pageTag = {
    first: '首页',
    prev: '上一页',
    list: null,     // 后期放分页页码
    next: '下一页',
    last: '末页',
};

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

let divObj = document.querySelector('div')
divObj.style.display = 'flex'
divObj.style.justifyContent = 'center'
divObj.style.alignItems = 'center'

// 二、显示分页标签
// 步骤1：通过forin来遍历对象  目的 动态创建p标签

for (let tag in pageTag) { // tag
    // console.log(tag) 对象的键tag 对象的值pageTag[tag]
    // 步骤2：在循环体中
    // 	1-创建p标签，
    let pObj = document.createElement('p')

    // null标签对象不要内容和外边框
    if (tag != 'list')
    {
        // 	2-创建内容，
        let textObj = document.createTextNode(pageTag[tag])
        // 	3-将内容追加到p标签中 ，
        pObj.appendChild(textObj)
        // 	4-给p设置样式（m 0 5 \ p 0 5 \ b 1 黑 \ d inline-block）
        pObj.style.margin = '0px 5px'
        pObj.style.padding = '0px 5px'
        pObj.style.border = '1px solid black'
        pObj.style.display = 'inline-block'
    }
    // 	5-将p标签追加到div标签对象里面
    divObj.appendChild(pObj)
}

// 分页标签禁用
let divTagPobj = document.querySelectorAll('div p')
// 如果pageInfo.pageNum==1  				 禁用  首页 和 上一页
if (pageInfo.pageNum==1) {
    divTagPobj[0].style.background = '#ccc'
    divTagPobj[1].style.background = '#ccc'
} 
// 如果pageInfo.pageNum==pageInfo.totalPage  禁用 下一页 和 尾页
if (pageInfo.pageNum==pageInfo.totalPage) {
    divTagPobj[3].style.background = '#ccc'
    divTagPobj[4].style.background = '#ccc'
}

// 注：background:#ccc


// 三、显示分页页码
// 步骤1：获取null标签对象（目的：后期分页页码都放到这个里面）
let nullObj = document.querySelector('div p:nth-child(3)')
// console.log(nullObj)
// 步骤2：通过for循环遍历（起始位置1，最大值<=pageInfo.totalPage）
// for (let i = 1; i<=pageInfo.totalPage; i++)
// for (let i = 1; i<=10; i++)
// {
//     // 	1-创建p标签，
//     let pObj = document.createElement('p')
//     // 	2-创建内容，（注：i第几页）
//     let textObj = document.createTextNode(i)
//     // 	3-将内容追加到p标签中 ，
//     pObj.appendChild(textObj)
//     // 	4-给p设置样式（m 0 5 \ p 0 5 \ b 1 黑 \ d inline-block）
//     pObj.style.margin = '0px 5px'
//     pObj.style.padding = '0px 5px'
//     pObj.style.border = '1px solid black'
//     pObj.style.display = 'inline-block'
//     // 	5-将p标签追加到【null标签对象】里面
//     nullObj.appendChild(pObj)
// }


// 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++) createP(i)
    createP('...', 'span')
    createP(pageInfo.totalPage - 1)
    createP(pageInfo.totalPage)

} else if (pageInfo.pageNum==5) {

    for (let i = 1; i<=7; i++) createP(i)
    createP('...', 'span')
    createP(pageInfo.totalPage - 1)
    createP(pageInfo.totalPage)

} else if (pageInfo.pageNum>5 && pageInfo.pageNum < pageInfo.totalPage-4) {

    for (let i = 1; i<=2; i++) createP(i)
    createP('...', 'span')
    for (let i = pageInfo.pageNum-2; i<=pageInfo.pageNum+2; i++) createP(i)
    createP('...', 'span')
    createP(pageInfo.totalPage - 1)
    createP(pageInfo.totalPage)

} else if (pageInfo.pageNum >= pageInfo.totalPage-4) {

    for (let i = 1; i<=2; i++) createP(i)
    createP('...', 'span')
    for (let i = pageInfo.totalPage-4; i<=pageInfo.totalPage; i++) createP(i)

}

function createP(content, tag = 'p')
{
    // 	1-创建p标签，
    // let pObj = document.createElement('p')
    let pObj = document.createElement(tag)
    // 	2-创建内容，（注：i第几页）
    // let textObj = document.createTextNode(i)
    let textObj = document.createTextNode(content)
    // 	3-将内容追加到p标签中 ，
    pObj.appendChild(textObj)
    // 	4-给p设置样式（m 0 5 \ p 0 5 \ b 1 黑 \ d inline-block）
    pObj.style.margin = '0px 5px'
    pObj.style.padding = '0px 5px'
    pObj.style.border = '1px solid black'
    pObj.style.display = 'inline-block'
    if (content == pageInfo.pageNum) pObj.style.background = 'orange'
    // 	5-将p标签追加到【null标签对象】里面
    nullObj.appendChild(pObj)
}
</script>

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

作用：当页面节点是通过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-重新渲染/展示页码

面向过程总体代码:

<style>
div {
    width: 800px;
    height: 40px;
    border: solid 1px black;
    margin: 30px auto;
}
</style>

<div></div>

<script>
// 一、全局变量
let pageTag = {
    first: '首页',
    prev: '上一页',
    list: null,     // 后期放分页页码
    next: '下一页',
    last: '末页',
};

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

let divObj = document.querySelector('div')
divObj.style.display = 'flex'
divObj.style.justifyContent = 'center'
divObj.style.alignItems = 'center'
divObj.addEventListener('click', function(evt){

    // 获取事件对象
    e = evt || window.event
    // 获取操作对象
    tag = e.target
    tagVal = tag.innerHTML
    // 判断
    if (tagVal == pageTag.first)
    {
        pageInfo.pageNum = 1
        createPageTag()
    } 
    
    if (
        tagVal == pageTag.prev 
        &&
        pageInfo.pageNum > 1
    )
    {
        pageInfo.pageNum = parseInt(pageInfo.pageNum) - 1
        createPageTag()
    } 

    //---------------------
    // 首页 上一页等等   NaN  为假
    // 如果点击了数字   数字为真
    if (Number(tagVal)) 
    {
        pageInfo.pageNum = parseInt(tagVal)
        createPageTag()
    }
    //---------------------
    
    if (
        tagVal ==  pageTag.next
        &&
        pageInfo.pageNum < pageInfo.totalPage
    )
    {
        pageInfo.pageNum = parseInt(pageInfo.pageNum) + 1
        createPageTag()
    } 
    
    if (tagVal == pageTag.last)
    {
        pageInfo.pageNum = pageInfo.totalPage
        createPageTag()
    } 

})



// 默认调用
createPageTag()

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


// 二、显示分页标签
function createPageTag()
{
    // 注：切记不管怎么样 每次调用先清空div内容
    divObj.innerHTML = ''
    //==============================
    //==============================
    //==============================

    // 步骤1：通过forin来遍历对象  目的 动态创建p标签
    for (let tag in pageTag) { // tag
        // console.log(tag) 对象的键tag 对象的值pageTag[tag]
        // 步骤2：在循环体中
        // 	1-创建p标签，
        let pObj = document.createElement('p')

        // null标签对象不要内容和外边框
        if (tag != 'list')
        {
            // 	2-创建内容，
            let textObj = document.createTextNode(pageTag[tag])
            // 	3-将内容追加到p标签中 ，
            pObj.appendChild(textObj)
            // 	4-给p设置样式（m 0 5 \ p 0 5 \ b 1 黑 \ d inline-block）
            pObj.style.margin = '0px 5px'
            pObj.style.padding = '0px 5px'
            pObj.style.border = '1px solid black'
            pObj.style.display = 'inline-block'
        }
        // 	5-将p标签追加到div标签对象里面
        divObj.appendChild(pObj)
    }

    // 分页标签禁用
    let divTagPobj = document.querySelectorAll('div p')
    // 如果pageInfo.pageNum==1  				 禁用  首页 和 上一页
    if (pageInfo.pageNum==1) {
        divTagPobj[0].style.background = '#ccc'
        divTagPobj[1].style.background = '#ccc'
    } 
    // 如果pageInfo.pageNum==pageInfo.totalPage  禁用 下一页 和 尾页
    if (pageInfo.pageNum==pageInfo.totalPage) {
        divTagPobj[3].style.background = '#ccc'
        divTagPobj[4].style.background = '#ccc'
    }

    // 注：background:#ccc


    // ===========================
    // 必须先有分页标签，才有分页页码
    createPageno()
}


// 三、显示分页页码
function createPageno()
{
    // 步骤1：获取null标签对象（目的：后期分页页码都放到这个里面）
    nullObj = document.querySelector('div p:nth-child(3)')
    // 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++) createP(i)
        createP('...', 'span')
        createP(pageInfo.totalPage - 1)
        createP(pageInfo.totalPage)

    } else if (pageInfo.pageNum==5) {

        for (let i = 1; i<=7; i++) createP(i)
        createP('...', 'span')
        createP(pageInfo.totalPage - 1)
        createP(pageInfo.totalPage)

    } else if (pageInfo.pageNum>5 && pageInfo.pageNum < pageInfo.totalPage-4) {

        for (let i = 1; i<=2; i++) createP(i)
        createP('...', 'span')
        for (let i = pageInfo.pageNum-2; i<=pageInfo.pageNum+2; i++) createP(i)
        createP('...', 'span')
        createP(pageInfo.totalPage - 1)
        createP(pageInfo.totalPage)

    } else if (pageInfo.pageNum >= pageInfo.totalPage-4) {

        for (let i = 1; i<=2; i++) createP(i)
        createP('...', 'span')
        for (let i = pageInfo.totalPage-4; i<=pageInfo.totalPage; i++) createP(i)
    }
}

function createP(content, tag = 'p')
{
    // 	1-创建p标签，
    // let pObj = document.createElement('p')
    let pObj = document.createElement(tag)
    // 	2-创建内容，（注：i第几页）
    // let textObj = document.createTextNode(i)
    let textObj = document.createTextNode(content)
    // 	3-将内容追加到p标签中 ，
    pObj.appendChild(textObj)
    // 	4-给p设置样式（m 0 5 \ p 0 5 \ b 1 黑 \ d inline-block）
    pObj.style.margin = '0px 5px'
    pObj.style.padding = '0px 5px'
    pObj.style.border = '1px solid black'
    pObj.style.display = 'inline-block'
    if (content == pageInfo.pageNum) pObj.style.background = 'orange'
    // 	5-将p标签追加到【null标签对象】里面
    nullObj.appendChild(pObj)
}
</script>

分页（面向对象）

明确需求
在这里插入图片描述
传统：面向过程代码 写两遍（代码冗余、不便于维护）

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

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

确定调用语法
明确：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结构部分

<style>
div {
    width: 800px;
    height: 40px;
    border: solid 1px black;
    margin: auto;
}
</style>
<div class="page1"></div>
<div class="page2"></div>
<script src="./pagination.js"></script>
<script>
let page1 = new Pagination('.page1',{
	// 分页标签
    pageTag : { 
        first: '首页',
        prev: '上一页',
        list: null,  
        next: '下一页',
        last: '末页',
    },
    // 分页页码的数据
    pageInfo : {
        pageNum:  100,    
        pageSize: 10,     
        totalData: 1000  
    }
})


let page2 = new Pagination('.page2',{
	// 分页标签
    pageTag : { 
        first: '首页',
        prev: '上一页',
        list: null,  
        next: '下一页',
        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)
    }
}


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>
<!-- <div class="page2"></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-根据情况显示）

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

<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)
</script>

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

每页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)
}
℡想定下来
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
面向对象-生活例子
s_x_x的记录
06-24 2635
---------------------- android培训、java培训、期待与您交流！ ----------------------看到这篇觉得很逗，也容易理解1、你面向对象就是面向你老婆    你跟她说“去倒茶”，她就会把茶到好；你说“老婆.衣服.颜色=红”，她就自己去把红色衣服换上。当你老婆做饭时，她会产生一个“帮忙”事件，当然，你可以选择处理或者不处理这个事件:p。你可以让老婆生B
Python面向对象05-面向对象封装案例 II
zhanghao840的博客
09-01 234
面向对象封装案例 II 目标 士兵突击案例 身份运算符 封装 封装 是面向对象编程的一大特点 面向对象编程的 第一步 —— 将 属性 和 方法 封装 到一个抽象的 类 中 外界 使用 类 创建 对象，然后 让对象调用方法 对象方法的细节 都被 封装 在 类的内部 一个对象的 属性 可以是 另外一个类创建的对象 01. 士兵突击 需求 士兵 许三多 有一把 AK47 士兵 ...
案例分析：面向对象得失论
weixin_34261739的博客
11-04 66
缘起 最近一段时间，在博客园关于面向对象的讨论比较热烈，你来我往的，好不热闹。不完全归纳一下，大约有以下几种意见比较受欢迎： A.        面向对象需要组织、团队支持，需要一种环境； B.        面向对象比面向过程编程要复杂，需要花很大代价才能掌握； C.        面向对象不是必须的； D.        面向对象存在一定的性能损失。 其实每一个意见都有的一定的依据...
面向对象 案例
qq_38256266的博客
06-30 68
this的指向性问题 //类1 定义变量that存储this class Bull{ constructor(){ this.ele = document.querySelector('button'); this.bindEvent(); } bindEvent(){ var that = this; //定义that存储this，此处this指向实例对象 .
面向对象中的案例
weixin_44528963的博客
10-01 3079
面向对象中的案例
java 面向对象 案例 合集
最新发布
07-18
java 面向对象 案例 合集java 面向对象 案例 合集java 面向对象 案例 合集java 面向对象 案例 合集java 面向对象 案例 合集java 面向对象 案例 合集java 面向对象 案例 合集java 面向对象 案例 合集java 面向对象 ...
面向对象分析过程案例实战
01-31
但是由于个人时间有限，在抉择之后，打算先写一篇关于面向对象分析的文章，也算是对自己过去 1年多在这方面学习的总结。我选了比较简单且大家也比较熟悉的案例来分析，案例虽然简单，但是基本的分析方法和推导过程还
python面向对象项目案例一.rar
07-31
在这个名为"python面向对象项目案例一.rar"的压缩包中，包含了详细的视频教程，旨在帮助学习者分步掌握面向对象编程的思想并应用于实际项目。教程分为九大部分，每部分都精心设计，确保内容逐步深入且易于理解。由于...
面向对象实例一
Susan0923的博客
05-25 127
class Person(): #经典类 　　def __init__(self,name): 　　#构造函数：类在实例化的时候自动执行的函数（非必须） 　　　　self.name = name 　　　　self.nose = 2 　　 #属性 　　　　self.face = 3 　　　　self.wing = 2 ...
js 面向对象案例
09-19
js 面向对象案例,这个kdmlkfmdkfmdslfmldsfmldsmfds22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
面向对象案例.zip
03-30
python的pickle实战代码 pickle模块实现了用于序列化和反序列化Python对象结构的二进制协议。 “Pickling”是将Python对象层次结构转换为字节流的过程， “unpickling”是反向操作，从而将字节流（来自二进制文件或类似字节的对象）转换回对象层次结构。pickle模块对于错误或恶意构造的数据是不安全的。
一个理解面向对象很好的例子
10-22
一个理解面向对象很好的例子 在学校老师就是用这个例子进行讲解，我认为还可以就传上来了，大家看看吧 好东西要一起分享
Java面向对象经典案例10个
03-22
Java面向对象经典案例10个，适合初学者，大学老师经典讲课习题
每日日报
weixin_44739931的博客
03-31 143
类和对象 类，相当于是一个图纸或者是模具 对象，是利用类所生产出来的实体的东西，只要有一个类，我们就可以创造出无数的实体。创造出来的实体，我们叫做实例对象 创建对象前，要先明确 这个对象是用来干什么的 它应该有哪些属性，是需要的。有哪些方法是需要的。 不同的类，会创建不同的对象 飞机图纸的类，只能用于创建飞机对象 小熊饼干模具的类，只能用于创建小熊饼干 类的定义 class关键词，用于定义类 类比...
5-面向对象案例
MARVEL_3000的博客
12-18 73
1 一定要有set、get、 属性一般使用prrivate 2 简单java诶不需要涉及到复杂的计算逻辑，设计的思考从简单java类开始 面向对象最基础开发中，简单Java类是解决先期设计最好的方案
面向对象案例分析
铁塔
02-02 999
初期的最可靠的也是最简单的分析依据：简单Java类 案例分析一：Address 编写并测试一个代表地址的Address类，地址信息由 国家、省份、城市、街道、邮编组成，并可以返回完整的地址信息 class Address { private String country ; private String province ; private String city ; private St...
面向对象案例 （六）
qq_42306826的博客
04-03 270
案例 面向对象到底是什么？ 面向对象的本质：定义不同的类，让类的实例工作 面向对象的优点：程序编写更清晰、代码结构更严密、使代码更健壮更利于维护 面向对象经常用到的场合：需要封装和复用性的场合（组件思 维） 小案例：红绿灯 页面上做一个红绿灯，点击红灯就变黄，点击黄灯就变绿，点击绿灯就变回红灯 使用面向对象编程，就能以“组件化”的思维解决大量红绿灯互相冲突的问题 面向对象编程，最重要的就是编写类 TrafficLight类 红绿灯TrafficLight类的属性和方法 属性：自己的当前颜色color、自
面向对象封装案例
诗蕊的专栏
09-02 1224
封装是面向对象编程的一大特点，面向对象编程的第一步就是将属性和方法封装到一个抽象的类中。外界使用类创建对象，然后让对象调用方法，而对象方法的细节都被封装在类的内部。在对象的方法内部是可以直接访问对象的属性的。 1. 例如我们有如下需求： （1）. 小明体重75.0公斤 （2）. 小明每次跑步会减肥0.5公斤 （3）. 小明每次吃东西体重增加1公斤 首先我们对需求进行分析，要完成以上需...
python 面向对象 案例
07-14
下面我给您介绍一个Python面向对象的案例。 假设我们要写一个游戏，这个游戏中有一个角色类，可以移动、攻击、防御等。我们可以先定义一个角色类，如下所示： ``` class Role: def __init__(self, name, hp, mp, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值