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