原生js封装的分页器原生js，分页器。这段代码的作用是网页常用的分页功能，这里提供了一个原生js的类的封装分页效果，只需

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页器</title>
    <style>
        .pagination{
            display: flex;
            width: 600px;
            height: 35px;
            margin: 0 auto ; 
            /* border: 1px solid red; */
        }
        .pagination span a {
            box-sizing: border-box;
            text-decoration: none;
            color: black;
        }
        .pagination span {
            /* border: 1px solid red; */
            text-align: center;
            width: 40px;
            height: 35px;
            line-height: 35px;
            margin: 0px 2px;
        }
        .pagination span i {
            font-size: 10px;
            font-weight: 100;
        }
        .pagination span img{
            width: 30px;
            height: 25px;
        }
        .pagination .pageStyle a {
            display: block;
            text-align: center;
            width: 40px;
            height: 35px;
            line-height: 35px;
            /* background-color: bisque; */
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .pagination .pageStyle a:hover {
            border: 1px solid rgb(27, 129, 121);
        } 
        .pagination .active{
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="pagination">
    </div>
    <script>
        class PageClass {                               //定义一个分页器类      
            constructor( ele , pageNum , page , cb ){   //需要传入4个参数，第一个容器元素，第二个页面总数，第三个当前页面数，第四个为回调函数
                this.ele = ele ;            //定义属性
                this.pageNum = pageNum ; 
                this.page = page ; 
                this.cb = cb ; 
                this.renderPage() ;     //执行渲染的方法
                this.operate();         //给实例化对象绑定各种操作的方法
            }
            renderPage(){                   //在类的原型上定义一个渲染的方法
                let str = '' ;
                if( this.pageNum > 5 ){     //判断当前分页的页面总数是否超过5页
                    if( this.page  <= 4 ){         //如果页面总数大于5  ，再判断当前页是否小于或者等于第四页
                        for( let i = 0 ; i < 5 ; i ++ ){        //如果当前页是小于等于4以内的页数 ，遍历1到5
                            if( (i+1) == this.page ){       //判断当前页是否等于 当前   索引值（索引值从0开始） +  1
                                str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;" class="active">${i+1}</a></span>`;//等于的话说明渲染的是当前页，给当前页一个active的类名进行渲染
                            } else {  //如果渲染的不是当前页
                                str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;">${i+1}</a></span>`;//普通渲染就行了
                            }
                        } 
                        str += `<span><i>•••</i></span><span class="pageStyle" myPage="${this.pageNum}"><a href="javascript:;">${this.pageNum}</a></span>` ;//最后渲染一个最末尾页
                    } else if (  this.page  > 4 && this.page < this.pageNum - 3  ){   //判断当前页是否大于第四页，且小于最大页数减去 3 
                        str += `<span class="pageStyle" myPage="1"><a href="javascript:;">1</a></span><span><i>•••</i></span>` ; //渲染一个首页
                        for( let i = this.page - 3 ; i < this.page + 2 ; i ++ ){
                            if( (i+1) == this.page ){ //判断当前正在渲染的是否为当前页
                                    str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;" class="active">${i+1}</a></span>`;//如果是当前页，给一个active类名进行渲染
                                } else {
                                    str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;">${i+1}</a></span>`;//如果不是，普通渲染就行
                                }
                            } 
                        str += `<span><i>•••</i></span><span class="pageStyle" myPage="${this.pageNum}"><a href="javascript:;">${this.pageNum}</a></span>` ;//渲染一个尾页
                    } else if ( this.page >= this.pageNum - 3){//如果当前页数大于或者等于最大页数 - 3 
                        str += `<span class="pageStyle" myPage="1"><a href="javascript:;">1</a></span><span><i>•••</i></span>` ; //渲染一个首页
                        for( let i = this.pageNum - 5 ; i < this.pageNum ; i ++ ){//从倒数第5页开始渲染
                            if( (i+1) == this.page ){   //如果渲染的是当前页
                                str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;" class="active">${i+1}</a></span>`;//增加一个active类名，进行渲染
                            } else {
                                str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;">${i+1}</a></span>`;//否则普通渲染
                            }
                        } 
                    }
                } else {        //如果最大页数小于等于5
                    for( let i = 0 ; i < this.pageNum ; i ++ ){     //直接渲染到当前最大页数
                        if( (i+1) == this.page ){           //判断渲染的是否为当前页数
                            str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;" class="active">${i+1}</a></span>`;//如果是增加一个active类名，进行渲染
                        } else {
                            str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;">${i+1}</a></span>`;//否则普通渲染就行了
                        }
                    }
                }
                //将所有内容渲染到容器盒子里
                //第一页
                //上一页
                //中间页面
                //下一页
                //最后一页
                this.ele.innerHTML = `
                <span class="first"><a href="javascript:;"><img src="./pageImg/images/first.png"></a></span>
                <span class="prev"><a href="javascript:;"><img src="./pageImg/images/prev.png"></a></span>
                ${str}
                <span class="next"><a href="javascript:;"><img src="./pageImg/images/next.png"></a></span>
                <span class="last"><a href="javascript:;"><img src="./pageImg/images/last.png"></a></span>` ;
            }
            operate(){                  //在类原型上定义一个operate的方法，给这个类绑定点击事件
                const _that = this ;        //申明一个常量接收this
                let firstEle = this.ele.querySelector(".first");    //获取第一页的元素
                let lastEle = this.ele.querySelector(".last");      //获取最后一页的元素
                let nextEle = this.ele.querySelector(".next");      //获取下一页的元素
                let prevEle = this.ele.querySelector(".prev");      //获取上一页的元素
                let pageStyleEles = this.ele.querySelectorAll(".pageStyle");    //获取所有的中间页面的元素
                firstEle.onclick = function (){     //当点击第一页时
                    _that.page = 1 ;                //让page属性重新赋值为1
                    _that.cb(_that.page);           //并将page属性通过回调函数cb传递出去
                }
                lastEle.onclick = function (){      //当点击最后一页时
                    _that.page = _that.pageNum ;    //让page属性重新赋值为页面最大值
                    _that.cb( _that.page);          //并将page属性通过回调函数cb传递出去
                }
                nextEle.onclick = function (){      //当点击下一页时
                    if( _that.page < _that.pageNum ){   //先判断当前页是否小于最大页
                        _that.page = _that.page + 1 ;   //如果没有超过，给page属性自增1
                        _that.cb(_that.page);           //并将page属性通过回调函数cb传递出去
                    }
                }
                prevEle.onclick = function (){      //当点击上一页时
                    if( _that.page > 1 ){           //先判断当前页是否大于第一页
                        _that.page = _that.page - 1 ;   //如果是大于第一页的话，page属性自减1
                        _that.cb(_that.page);           //并将page属性通过回调函数cb传递出去
                    }
                }
                pageStyleEles.forEach(function(pageStyleEle){       //遍历获取到中间页面的所有元素
                    pageStyleEle.onclick = function (){                //当点击其中一页时
                        _that.page = parseInt(this.getAttribute("myPage")); //获取这个元素自定义属性，myPage，属性值是当前页 ，并将当前页赋值给page属性
                        _that.cb(_that.page);                           //将page属性通过回调函数cb传递出去
                    }
                });
            }
        }
        let pageEle = document.querySelector(".pagination");            //获取页面渲染的容器
        ready(1);                                                   //调用渲染容器的方法，传递初始页面为1
        function ready(page){                                       // 定义一个方法用来渲染容器
            new PageClass(pageEle,1000,page,function(page){         //new 一个PageClass类，传递容器元素，总页面数，当前页面，以及回调函数
                // console.log(page);
                ready(page);                        //回调函数调用渲染容器的方法
            });
        }
    </script>
</body>
</html>