資訊專欄INFORMATION COLUMN
摘要：在根據(jù)設(shè)置每頁顯示條數(shù)，計算出最大頁碼。是當(dāng)前頁碼，默認設(shè)置為第一頁包含個原型函數(shù)一個為一個為這個函數(shù)的作用是根據(jù)當(dāng)前選中的頁碼來渲染。
初學(xué)前端不久，第一次寫文章，希望大佬多多指教，謝謝??！
目的：實現(xiàn)一個分頁點擊事件的js組件特效，
效果如下：
錄gif的軟出了點問題，感覺鼠標(biāo)不移動
代碼實現(xiàn)：
html代碼：
加上css后效果：
因為每次選中的頁面在中間，則吧中間設(shè)置一個點擊的class
JS實現(xiàn)：
function Paging(list_num,ali,btn){
this.list_num=list_num;
this.ali=ali;
this.btn=btn;
this.page=1;//定義一個當(dāng)前頁面的全局變量
this.num=5;//每頁文章數(shù)目
this.page_num=Math.ceil(this.list_num/this.num);//根據(jù)文章數(shù)和每頁顯示數(shù)，向上取整算出頁碼數(shù)
this.drc=[this.page-2,this.page-1,this.page,this.page+1,this.page+2];
}
設(shè)置一個Paging的對象，傳入形參文章數(shù)(list_num),頁碼按鈕(ali)，上下頁按鈕(btn)。在根據(jù)設(shè)置每頁顯示條數(shù)，計算出最大頁碼。這里解釋一下this.drc，因為中間的按鈕是當(dāng)前頁碼，則前面一頁是當(dāng)前頁碼減一，其他同理。this.page是當(dāng)前頁碼，默認設(shè)置為第一頁
Paging包含2個原型函數(shù)一個為init,一個為render這個函數(shù)的作用是根據(jù)當(dāng)前選中的頁碼(this.page)
來渲染ali。
下面先來看下init函數(shù)：
init:function(){
var self=this;
//ali綁定點擊事件
for(var i=0,len=ali.length;i0&&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標(biāo)簽里面賦值，這里采用循環(huán)的方式賦值，在代碼第六行的if判斷里面，進過this.drc計算，如果出現(xiàn)值是比1小的或者比最頁碼(this.page_num)還大的情況吧值設(shè)置為※，意味這改頁碼不能點擊。在代碼 self.page=parseInt(val);這句中的parseInt函數(shù)非常關(guān)鍵，如果沒有設(shè)置這后面頁碼生成會出現(xiàn)問題，這里的判斷值能否與1整除，如果不能整除則知曉用戶點擊的是※，這時我們彈出對話框提示用戶沒有頁碼，并return。這里都是點擊以后改變?nèi)肿兞縯his.page然后調(diào)用render函數(shù)。
下面我們來看下render函數(shù)：
if(this.page<=0){
alert("已經(jīng)是列表的首頁");
}else if(this.page>this.page_num){
alert("已經(jīng)是列表的最后一頁");
}else{
this.drc=[this.page-2,this.page-1,this.page,this.page+1,this.page+2];
for(var i=0,len=ali.length;ithis.page_num){
ali[i].innerText="*";
}else{
ali[i].innerText=this.drc[i];
}
}
}
這里代碼很簡潔，就是三個if判斷分支語句，當(dāng)頁碼小于0或者大于頁碼最大值的時候彈出窗口，當(dāng)頁碼在1到最大頁碼之間的時候，進行ali的渲染，在for循環(huán)里面的if判斷和前面的思路是一致的，均是當(dāng)頁碼不在范圍類賦值成‘*’,在范圍內(nèi)時，給其賦值。
下面是在js中調(diào)用這個對象
//文章數(shù)目，定義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();
當(dāng)然這里也可以與ajax合用，設(shè)置一個分頁的模塊，向ajax傳入?yún)?shù)獲取數(shù)據(jù)，然后根據(jù)返回的json，設(shè)置顯示內(nèi)容
前端新手，希望各位大佬，多多留言，多多指教，謝謝?。?/p>
完整代碼github：https://github.com/LiChangyi
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/88734.html
摘要：使用構(gòu)造函數(shù)那么有沒有一種辦法，可以不寫函數(shù)名，直接聲明一個函數(shù)并自動調(diào)用它呢答案肯定的，那就是使用自執(zhí)行函數(shù)。 日常工作中經(jīng)常會發(fā)現(xiàn)有大量業(yè)務(wù)邏輯是重復(fù)的，而用別人的插件也不能完美解決一些定制化的需求，所以我決定把一些常用的組件抽離、封裝出來，形成一套自己的插件庫。同時，我將用這個教程系列記錄下每一個插件的開發(fā)過程，手把手教你如何一步一步去造出一套實用性、可復(fù)用性高的輪子。 So, ...
摘要：初始化項目使用初始化項目安裝項目結(jié)構(gòu)如下接口所有接口對封裝接下來對進行封裝，加上中間件實現(xiàn)類似于攔截器的效果。 Graphql嘗鮮 在只學(xué)習(xí)graphql client端知識的過程中，我們常常需要一個graphql ide來提示graphql語法，以及實現(xiàn)graphql的server端來進行練手。graphql社區(qū)提供了graphiql讓我們使用 graphiql (npm)：一個交互...
摘要：在移動端的頁面里，我們經(jīng)常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大家補充下可能需要的功能。 在移動端的h5頁面里，我們經(jīng)常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦swipe插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大...
摘要：在移動端的頁面里，我們經(jīng)常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大家補充下可能需要的功能。 在移動端的h5頁面里，我們經(jīng)常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦swipe插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大...
閱讀 995·2021-10-25 09:48
閱讀 697·2021-08-23 09:45
閱讀 2551·2019-08-30 15:53
閱讀 1806·2019-08-30 12:45
閱讀 734·2019-08-29 17:21
閱讀 3549·2019-08-27 10:56
閱讀 2605·2019-08-26 13:48
閱讀 756·2019-08-26 12:24
