JavaScript实现分页效果

初学前端不久，第一次写文章，但愿大佬多多指教，谢谢！！
目的：实现一个分页点击事件的js组件特效，
效果以下：

录gif的软出了点问题，感受鼠标不移动

代码实现：
html代码：

加上css后效果：

由于每次选中的页面在中间，则吧中间设置一个点击的class

JS实现：

function Paging(list_num,ali,btn){
    this.list_num=list_num;
    this.ali=ali;
    this.btn=btn;
    this.page=1;//定义一个当前页面的全局变量
    this.num=5;//每页文章数目
    this.page_num=Math.ceil(this.list_num/this.num);//根据文章数和每页显示数，向上取整算出页码数
    this.drc=[this.page-2,this.page-1,this.page,this.page+1,this.page+2];  
}

设置一个Paging的对象，传入形参文章数(list_num),页码按钮(ali)，上下页按钮(btn)。在根据设置每页显示条数，计算出最大页码。这里解释一下this.drc，由于中间的按钮是当前页码，则前面一页是当前页码减一，其余同理。this.page是当前页码，默认设置为第一页
Paging包含2个原型函数一个为init,一个为render这个函数的做用是根据当前选中的页码(this.page)
来渲染ali。
下面先来看下init函数：

init:function(){
        var self=this;
        //ali绑定点击事件
        for(var i=0,len=ali.length;i<len;i++){
            //给ali添加innertext
            if(this.drc[i]>0&&this.drc[i]<=this.page_num){
                ali[i].innerText=this.drc[i];
            }else{
                ali[i].innerText='*';
            }
            ali[i].onclick=function(){
                var val=this.innerText;
                if(val%1===0){
                    self.page=parseInt(val);
                }else{
                    alert('请单击正确的页码');
                    return;
                }
                self.render();
            }
        }
        //给上一页、下一页添加点击事件
        btn[0].onclick=function(){
            self.page--;
            self.render();
        }
        btn[1].onclick=function(){
            self.page++;
            self.render();
        }
    }

由于html里面没有在li标签里面赋值，这里采用循环的方式赋值，在代码第六行的if判断里面，进过this.drc计算，若是出现值是比1小的或者比最页码(this.page_num)还大的状况吧值设置为※，意味这改页码不能点击。在代码 self.page=parseInt(val);这句中的parseInt函数很是关键，若是没有设置这后面页码生成会出现问题，这里的判断值可否与1整除，若是不能整除则知晓用户点击的是※，这时咱们弹出对话框提示用户没有页码，并return。这里都是点击之后改变全局变量this.page而后调用render函数。
下面咱们来看下render函数：

if(this.page<=0){
    alert('已是列表的首页');
}else if(this.page>this.page_num){
    alert('已是列表的最后一页');
}else{
    this.drc=[this.page-2,this.page-1,this.page,this.page+1,this.page+2];
    for(var i=0,len=ali.length;i<len;i++){
        if(this.drc[i]<=0||this.drc[i]>this.page_num){
            ali[i].innerText='*';
        }else{
            ali[i].innerText=this.drc[i];
        }
    }
}

这里代码很简洁，就是三个if判断分支语句，当页码小于0或者大于页码最大值的时候弹出窗口，当页码在1到最大页码之间的时候，进行ali的渲染，在for循环里面的if判断和前面的思路是一致的，均是当页码不在范围类赋值成‘*’,在范围内时，给其赋值。

下面是在js中调用这个对象

//文章数目，定义50篇
var list_num=50;
//ali，获取页码的DOM
var ali=document.getElementsByClassName('page_num');
//btn，获取上下2页的按钮
var btn=document.getElementsByClassName('list_btn');
var paging=new Paging(list_num,ali,btn);
paging.init();

固然这里也能够与ajax合用，设置一个分页的模块，向ajax传入参数获取数据，而后根据返回的json，设置显示内容

前端新手，但愿各位大佬，多多留言，多多指教，谢谢！！

完整代码github：https://github.com/LiChangyi