欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于原生JS實(shí)現(xiàn)分頁(yè)效果的示例代碼

 更新時(shí)間:2022年04月19日 14:14:13   作者:小強(qiáng)112233  
這篇文章主要為大家詳細(xì)介紹了如何利用原生js實(shí)現(xiàn)分頁(yè)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

這個(gè)只是一個(gè)分頁(yè)的demo,主要是思路整理(很久之前項(xiàng)目用的東西)

分頁(yè)實(shí)現(xiàn)的效果 主要是 左側(cè)上一頁(yè) 右側(cè)是下一頁(yè) 中間顯示主要是超過5個(gè)顯示 省略號(hào) 然后是可配置選項(xiàng)

實(shí)現(xiàn)之后的效果

首先需要初始化該對(duì)象的一些基本屬性,顯示總頁(yè)碼數(shù),中間顯示的頁(yè)面數(shù), 添加一個(gè)回調(diào)函數(shù),在頁(yè)面變化激活回調(diào)函數(shù)并返回當(dāng)前頁(yè)面和一些需要的其他參數(shù) init為對(duì)象初始化的方法(里面的參數(shù)都是可以寫成活的,我這里偷懶了所以寫成死的了) 這個(gè)里的 z_page 可以接是接口返回的總頁(yè)數(shù)

 function Page(obj) {
     this.obj = obj||{page:1,page_count: 0};
     this.z_page = 7;    // 一共顯示的頁(yè)碼數(shù)
     this.show_page = this.z_page-2; // 中間顯示多少個(gè)頁(yè)碼  必須是個(gè)基數(shù)好看
     this.fn = this.obj.block;
     this.init()
 }

在init在初始化方法里主要是判斷

1 總頁(yè)數(shù)是否小于顯示頁(yè)面(這個(gè)主要是判斷是否顯示省略號(hào),添加省略號(hào)比較麻煩,這個(gè)是總頁(yè)數(shù)少不用添加)

2 當(dāng)前頁(yè)面數(shù)+左右顯示的平均數(shù)(show_page/2-1)+1和總頁(yè)面相比 這個(gè)主要判斷省略號(hào)在前面的問題(靠近尾頁(yè))前面有省略號(hào)

3 左右顯示的平均數(shù)(show_page/2-1)+2(最前面1 和最后的書)大于當(dāng)前頁(yè)面數(shù)(靠近首頁(yè))

第一個(gè)圖片(后面有省略號(hào))

4 剩下的狀態(tài)就是中間狀態(tài)(兩側(cè)有省略號(hào))

這個(gè)判斷其實(shí)也是要判斷咱們分頁(yè)的邊界條件,如果這個(gè)想好了并且實(shí)現(xiàn)了 相當(dāng)于就完成了一半 初始化方法的最后是要給上一頁(yè)和下一頁(yè),有數(shù)字的頁(yè)簽 添加點(diǎn)擊事件 并且做相應(yīng)邏輯處理 代碼的實(shí)現(xiàn)

Page.prototype.create = function () {
     // page:1 page_count 17
     // 保證被點(diǎn)擊的頁(yè)數(shù)在中間
     var ping = (this.show_page-1)/2; // 左右顯示的平均數(shù)  在中間
     var num = this.obj.page-ping; // 最小頁(yè)碼
     var endnum =  (this.obj.page+ping)>this.obj.page_count?this.obj.page_count:(this.obj.page+ping) // 最大頁(yè)碼
     console.log(endnum);
     var pageID = document.getElementById('pageID');
     var self= this;
     pageID.innerHTML = '';
     num = num<1?1:num;
     if (this.obj.page_count<= this.z_page) {
         alert('smallPage');
         this.smallPage()
     } else if( (this.obj.page+ping+1)>=this.obj.page_count) {// 還要加上最后一個(gè)   接近尾頁(yè)
         pageID.appendChild(this.nearBack())
         console.log('尾巴')

     } else if ((ping+2)>=(this.obj.page)) {  //3   接近首頁(yè)
         pageID.appendChild( this.nearHome())
         console.log('臨近首頁(yè)')
     }else {
         console.log(num,endnum);
         pageID.appendChild(this.centerPage(num,endnum));
     }
     document.onclick = function (event) {
         switch (event.target.className) {
             case 'previous':
                 self._previous();
                 break;
             case 'next':
                 self._next();
                 break;
             default:
                 self.clickLi(event.target);
         }
         self.fn(self.obj.page)
     }
 };

剩下的就是只想邏輯和dom操作了 因?yàn)槭怯玫脑鷍s,這里是用的文檔碎片,把我生成的dom全部都放到文檔碎片里,然后一次性返出來 直接append到body上 這個(gè)是我的方法代碼

 Page.prototype.nearBack = function () {
     var oFragmeng = document.createDocumentFragment(); // 創(chuàng)建了一個(gè)文檔碎片
     var ul = document.createElement('ul')
     var Div = oFragmeng.appendChild(ul);
      Div.innerHTML = '<li>1</li><li>....</li>';
     for (var m=(this.obj.page_count- this.show_page);m<=this.obj.page_count;m++) {
         var li1 = document.createElement('li');
         li1.innerHTML = m;
         if (m===this.obj.page) {
             li1.className = 'active'
         }
         Div.appendChild(li1)
     }
    return oFragmeng.firstChild;
 };

總結(jié):分頁(yè) 也會(huì)和你實(shí)現(xiàn)的分頁(yè)效果不同,實(shí)現(xiàn)方式也有區(qū)別,但是核心思想是一樣的。 

到此這篇關(guān)于基于原生JS實(shí)現(xiàn)分頁(yè)效果的示例代碼的文章就介紹到這了,更多相關(guān)JS分頁(yè)效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 簡(jiǎn)單的JS時(shí)鐘實(shí)例講解

    簡(jiǎn)單的JS時(shí)鐘實(shí)例講解

    這篇文章主要為大家分享了一個(gè)簡(jiǎn)單的JS時(shí)鐘實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-01-01
  • JS組件Bootstrap dropdown組件擴(kuò)展hover事件

    JS組件Bootstrap dropdown組件擴(kuò)展hover事件

    bootstrap的下拉組件,需要點(diǎn)擊click時(shí),方可展示下拉列表。因此對(duì)于喜歡簡(jiǎn)單少操作的大家來說,點(diǎn)擊一下多少帶來不便,因此,引入hover監(jiān)聽,鼠標(biāo)經(jīng)過自動(dòng)展示下拉框。這篇文章主要介紹了JS組件Bootstrap dropdown組件擴(kuò)展hover事件,感興趣的小伙伴們可以參考一下
    2016-04-04
  • 解決Layui 表單提交數(shù)據(jù)為空的問題

    解決Layui 表單提交數(shù)據(jù)為空的問題

    今天小編就為大家分享一篇解決Layui 表單提交數(shù)據(jù)為空的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • 文本框倒敘輸入讓輸入框的焦點(diǎn)始終在最開始的位置

    文本框倒敘輸入讓輸入框的焦點(diǎn)始終在最開始的位置

    所謂的文本框倒敘輸入是指輸入框的焦點(diǎn)始終在最開始的位置,下面是具體的實(shí)現(xiàn),感興趣的朋友可以學(xué)習(xí)下
    2014-09-09
  • 玩轉(zhuǎn)方法:call和apply

    玩轉(zhuǎn)方法:call和apply

    在實(shí)現(xiàn)繼承的時(shí)候,用到了兩個(gè)很特殊的方法,call和apply,下面,我就來說一下這個(gè)兩個(gè)方法
    2014-05-05
  • Javascript Worker子線程代碼實(shí)例

    Javascript Worker子線程代碼實(shí)例

    這篇文章主要介紹了Javascript Worker子線程代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-02-02
  • js實(shí)現(xiàn)貪吃蛇小游戲(加墻)

    js實(shí)現(xiàn)貪吃蛇小游戲(加墻)

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)貪吃蛇小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-07-07
  • 解決bootstrap-select 動(dòng)態(tài)加載數(shù)據(jù)不顯示的問題

    解決bootstrap-select 動(dòng)態(tài)加載數(shù)據(jù)不顯示的問題

    今天小編就為大家分享一篇解決bootstrap-select 動(dòng)態(tài)加載數(shù)據(jù)不顯示的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Javascript閉包實(shí)例詳解

    Javascript閉包實(shí)例詳解

    閉包就是函數(shù)的局部變量集合,只是這些局部變量在函數(shù)返回后會(huì)繼續(xù)存在,本文通過代碼實(shí)例給大家介紹javascript閉包,對(duì)javascipt閉包相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
    2015-11-11
  • JS實(shí)現(xiàn)為動(dòng)態(tài)創(chuàng)建的元素添加事件操作示例

    JS實(shí)現(xiàn)為動(dòng)態(tài)創(chuàng)建的元素添加事件操作示例

    這篇文章主要介紹了JS實(shí)現(xiàn)為動(dòng)態(tài)創(chuàng)建的元素添加事件操作,涉及javascript頁(yè)面元素動(dòng)態(tài)添加及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下
    2018-03-03

最新評(píng)論