国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript實(shí)現(xiàn)分頁(yè)效果

lavor / 1831人閱讀

摘要：在根據(jù)設(shè)置每頁(yè)顯示條數(shù)，計(jì)算出最大頁(yè)碼。是當(dāng)前頁(yè)碼，默認(rèn)設(shè)置為第一頁(yè)包含個(gè)原型函數(shù)一個(gè)為一個(gè)為這個(gè)函數(shù)的作用是根據(jù)當(dāng)前選中的頁(yè)碼來(lái)渲染。

初學(xué)前端不久，第一次寫(xiě)文章，希望大佬多多指教，謝謝！！
目的：實(shí)現(xiàn)一個(gè)分頁(yè)點(diǎn)擊事件的js組件特效，
效果如下：

錄gif的軟出了點(diǎn)問(wèn)題，感覺(jué)鼠標(biāo)不移動(dòng)

代碼實(shí)現(xiàn)：
html代碼：

加上css后效果：

因?yàn)槊看芜x中的頁(yè)面在中間，則吧中間設(shè)置一個(gè)點(diǎn)擊的class

JS實(shí)現(xiàn)：

function Paging(list_num,ali,btn){
    this.list_num=list_num;
    this.ali=ali;
    this.btn=btn;
    this.page=1;//定義一個(gè)當(dāng)前頁(yè)面的全局變量
    this.num=5;//每頁(yè)文章數(shù)目
    this.page_num=Math.ceil(this.list_num/this.num);//根據(jù)文章數(shù)和每頁(yè)顯示數(shù)，向上取整算出頁(yè)碼數(shù)
    this.drc=[this.page-2,this.page-1,this.page,this.page+1,this.page+2];  
}

設(shè)置一個(gè)Paging的對(duì)象，傳入形參文章數(shù)(list_num),頁(yè)碼按鈕(ali)，上下頁(yè)按鈕(btn)。在根據(jù)設(shè)置每頁(yè)顯示條數(shù)，計(jì)算出最大頁(yè)碼。這里解釋一下this.drc，因?yàn)橹虚g的按鈕是當(dāng)前頁(yè)碼，則前面一頁(yè)是當(dāng)前頁(yè)碼減一，其他同理。this.page是當(dāng)前頁(yè)碼，默認(rèn)設(shè)置為第一頁(yè)
Paging包含2個(gè)原型函數(shù)一個(gè)為init,一個(gè)為render這個(gè)函數(shù)的作用是根據(jù)當(dāng)前選中的頁(yè)碼(this.page)
來(lái)渲染ali。
下面先來(lái)看下init函數(shù)：

init:function(){
        var self=this;
        //ali綁定點(diǎn)擊事件
        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("請(qǐng)單擊正確的頁(yè)碼");
                    return;
                }
                self.render();
            }
        }
        //給上一頁(yè)、下一頁(yè)添加點(diǎn)擊事件
        btn[0].onclick=function(){
            self.page--;
            self.render();
        }
        btn[1].onclick=function(){
            self.page++;
            self.render();
        }
    }

因?yàn)閔tml里面沒(méi)有在li標(biāo)簽里面賦值，這里采用循環(huán)的方式賦值，在代碼第六行的if判斷里面，進(jìn)過(guò)this.drc計(jì)算，如果出現(xiàn)值是比1小的或者比最頁(yè)碼(this.page_num)還大的情況吧值設(shè)置為※，意味這改頁(yè)碼不能點(diǎn)擊。在代碼 self.page=parseInt(val);這句中的parseInt函數(shù)非常關(guān)鍵，如果沒(méi)有設(shè)置這后面頁(yè)碼生成會(huì)出現(xiàn)問(wèn)題，這里的判斷值能否與1整除，如果不能整除則知曉用戶點(diǎn)擊的是※，這時(shí)我們彈出對(duì)話框提示用戶沒(méi)有頁(yè)碼，并return。這里都是點(diǎn)擊以后改變?nèi)肿兞縯his.page然后調(diào)用render函數(shù)。
下面我們來(lái)看下render函數(shù)：

if(this.page<=0){
    alert("已經(jīng)是列表的首頁(yè)");
}else if(this.page>this.page_num){
    alert("已經(jīng)是列表的最后一頁(yè)");
}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];
        }
    }
}

這里代碼很簡(jiǎn)潔，就是三個(gè)if判斷分支語(yǔ)句，當(dāng)頁(yè)碼小于0或者大于頁(yè)碼最大值的時(shí)候彈出窗口，當(dāng)頁(yè)碼在1到最大頁(yè)碼之間的時(shí)候，進(jìn)行ali的渲染，在for循環(huán)里面的if判斷和前面的思路是一致的，均是當(dāng)頁(yè)碼不在范圍類賦值成‘*’,在范圍內(nèi)時(shí)，給其賦值。

下面是在js中調(diào)用這個(gè)對(duì)象

//文章數(shù)目，定義50篇
var list_num=50;
//ali，獲取頁(yè)碼的DOM
var ali=document.getElementsByClassName("page_num");
//btn，獲取上下2頁(yè)的按鈕
var btn=document.getElementsByClassName("list_btn");
var paging=new Paging(list_num,ali,btn);
paging.init();

當(dāng)然這里也可以與ajax合用，設(shè)置一個(gè)分頁(yè)的模塊，向ajax傳入?yún)?shù)獲取數(shù)據(jù)，然后根據(jù)返回的json，設(shè)置顯示內(nèi)容

前端新手，希望各位大佬，多多留言，多多指教，謝謝！！

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/88734.html

相關(guān)文章

  • 手把手教你用原生JavaScript造輪子（1）——分頁(yè)器（最后更新：Vue插件版本，本篇Over！

    摘要：使用構(gòu)造函數(shù)那么有沒(méi)有一種辦法，可以不寫(xiě)函數(shù)名，直接聲明一個(gè)函數(shù)并自動(dòng)調(diào)用它呢答案肯定的，那就是使用自執(zhí)行函數(shù)。 日常工作中經(jīng)常會(huì)發(fā)現(xiàn)有大量業(yè)務(wù)邏輯是重復(fù)的，而用別人的插件也不能完美解決一些定制化的需求，所以我決定把一些常用的組件抽離、封裝出來(lái)，形成一套自己的插件庫(kù)。同時(shí)，我將用這個(gè)教程系列記錄下每一個(gè)插件的開(kāi)發(fā)過(guò)程，手把手教你如何一步一步去造出一套實(shí)用性、可復(fù)用性高的輪子。 So, ...

    CHENGKANG 評(píng)論0 收藏0

  • Graphql實(shí)踐——像axios一樣使用Graphql

    摘要：初始化項(xiàng)目使用初始化項(xiàng)目安裝項(xiàng)目結(jié)構(gòu)如下接口所有接口對(duì)封裝接下來(lái)對(duì)進(jìn)行封裝，加上中間件實(shí)現(xiàn)類似于攔截器的效果。 Graphql嘗鮮 在只學(xué)習(xí)graphql client端知識(shí)的過(guò)程中，我們常常需要一個(gè)graphql ide來(lái)提示graphql語(yǔ)法，以及實(shí)現(xiàn)graphql的server端來(lái)進(jìn)行練手。graphql社區(qū)提供了graphiql讓我們使用 graphiql (npm)：一個(gè)交互...

    mumumu 評(píng)論0 收藏0

  • 移動(dòng)端h5輪播插件swipe

    摘要：在移動(dòng)端的頁(yè)面里，我們經(jīng)常會(huì)有輪播圖的需求，如果不需要太多的效果，只是簡(jiǎn)單的手指滑動(dòng)和自動(dòng)輪換效果的話，我比較推薦插件，不過(guò)百度搜索到的這個(gè)插件，里面介紹的不是很完整，我給大家補(bǔ)充下可能需要的功能。 在移動(dòng)端的h5頁(yè)面里，我們經(jīng)常會(huì)有輪播圖的需求，如果不需要太多的效果，只是簡(jiǎn)單的手指滑動(dòng)和自動(dòng)輪換效果的話，我比較推薦swipe插件，不過(guò)百度搜索到的這個(gè)插件，里面介紹的不是很完整，我給大...

    funnyZhang 評(píng)論0 收藏0

  • 移動(dòng)端h5輪播插件swipe

    摘要：在移動(dòng)端的頁(yè)面里，我們經(jīng)常會(huì)有輪播圖的需求，如果不需要太多的效果，只是簡(jiǎn)單的手指滑動(dòng)和自動(dòng)輪換效果的話，我比較推薦插件，不過(guò)百度搜索到的這個(gè)插件，里面介紹的不是很完整，我給大家補(bǔ)充下可能需要的功能。 在移動(dòng)端的h5頁(yè)面里，我們經(jīng)常會(huì)有輪播圖的需求，如果不需要太多的效果，只是簡(jiǎn)單的手指滑動(dòng)和自動(dòng)輪換效果的話，我比較推薦swipe插件，不過(guò)百度搜索到的這個(gè)插件，里面介紹的不是很完整，我給大...

    Juven 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<