純JS實現前端動態分頁碼_ZenDei技術網路在線

純JS實現前端動態分頁碼

-Advertisement-

思路分析：有3種情況第一種情況，當前頁面curPage < 4 第二種情況，當前頁面curPage == 4 第三種情況，當前頁面curPage>4 此外，還要考慮，當前頁碼 curPage < pageTotal（總頁碼）-2，才顯示 ... 首先，先是前端的佈局樣式 <!-- 後面會在JS中動 ...

思路分析：有3種情況

第一種情況，當前頁面curPage < 4

第二種情況，當前頁面curPage == 4

第三種情況，當前頁面curPage>4

此外，還要考慮，當前頁碼 curPage < pageTotal（總頁碼）-2，才顯示 ...

首先，先是前端的佈局樣式

<body>
      /*首先，在body中添加div id="pagination" */
      <div id="pagination">

      </div>
</body>

其次，是css代碼

*{
            margin: 0;
            padding: 0;
        }
        #pagination{
            width: 500px;
            height: 100px;
            border: 2px solid crimson;
            
            margin: 50px auto ;
            padding-top: 50px ;
            padding-left: 50px;
        }
        
        .over,.pageItem{
            float: left;
            display: block;
            width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
        }
        
        .pageItem{
            border: 1px solid orangered;
            text-decoration: none;
            color: dimgrey;
            margin-right: -1px;/*解決邊框加粗問題*/
        }
        .pageItem:hover{
            background-color: #f98e4594;
            color:orangered ;
        }
        .clearfix{
            clear: both;
        }
        .active{
            background-color: #f98e4594;
            color:orangered ;
        }
        .banBtn{
            border:1px solid #ff980069;
            color: #ff980069;
        }
        #prevBtn{
            margin-right: 10px;
        }
        #nextBtn{
            margin-left: 10px;
        }

JavaScript代碼

<script type="text/javascript">
    
    var pageOptions = {pageTotal:10,curPage:7,paginationId:''};
    dynamicPagingFunc(pageOptions);
    
    function dynamicPagingFunc(pageOptions){
        var pageTotal = pageOptions.pageTotal || 1;
        var curPage = pageOptions.curPage||1;
        var doc = document;
        var paginationId = doc.getElementById(''+pageOptions.paginationId+'') || doc.getElementById('pagination');
        var html = '';
        if(curPage>pageTotal){
            curPage =1;
        }
        /*總頁數小於5，全部顯示*/
        if(pageTotal<=5){
            html = appendItem(pageTotal,curPage,html);
            paginationId.innerHTML = html;
        }
        /*總頁數大於5時，要分析當前頁*/
        if(pageTotal>5){
            if(curPage<=4){
                html = appendItem(pageTotal,curPage,html);
                paginationId.innerHTML = html;
            }else if(curPage>4){
                html = appendItem(pageTotal,curPage,html);
                paginationId.innerHTML = html;
            }
        }
    }
    
    function appendItem(pageTotal,curPage,html){
        var starPage = 0;
        var endPage = 0;
        
        html+='<a class="pageItem" id="prevBtn">&lt;</a>';
        
        if(pageTotal<=5){
            starPage = 1;
            endPage = pageTotal;    
        }else if(pageTotal>5 && curPage<=4){
            starPage = 1;
            endPage = 4;
            if(curPage==4){
                endPage = 5;
            }
        }else{
            if(pageTotal==curPage){
                starPage = curPage-3;
                endPage = curPage;
            }else{
                starPage = curPage-2;
                endPage = curPage+1;
            }
            html += '<a class="pageItem" id="first">1</a><span class="over">...</span>';
        }
        
        for(let i = starPage;i <= endPage;i++){
            if(i==curPage){
                html += '<a class="active pageItem" id="first">'+i+'</a>';
            }else{
                html += '<a href="#" class="pageItem">'+i+'</a>';
            }
        }
        
        if(pageTotal<=5){
            html+='<a href="#" class="pageItem" id="nextBtn">&gt;</a>';
        }else{
            if(curPage<pageTotal-2){ 
                html += '<span class="over">...</span>';
            }
            if(curPage<=pageTotal-2){
                html += '<a href="#" class="pageItem">'+pageTotal+'</a>';
            }
            html+='<a href="#" class="pageItem" id="nextBtn">&gt;</a>';
        }
        return html;
    }
    
</script>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

5步告訴你QQ音樂的完美音質是怎麼來的，播放器的秘密都在這裡

歡迎大家前往 "騰訊雲+社區" ，獲取更多騰訊海量技術實踐乾貨哦~ 本文由 "QQ音樂技術團隊" 發表於 "雲+社區專欄" 一、問題背景與分析不久前，團隊發現其Android平臺App在播放MV視頻《鳳凰花開的路口》時，會帶有如電流聲一般的雜音，這影響了用戶體驗。研發同學在初步定位時，發現有如下 ...
Android P的APP適配總結，讓你快人一步

歡迎大家前往 "騰訊雲+社區" ，獲取更多騰訊海量技術實踐乾貨哦~ 本文由 "QQ音樂技術團隊" 發表於 "雲+社區專欄" 上篇：Android P 行為變更適配 Android P 這次有很多行為變更，其中不乏一些需要亟需適配的變更。一、全面屏檢測在 Android 8.0 時代各個手機廠商就 ...
前端學習日記-小程式篇

測試內容 ...
相容性問題的解決方式（更新中···）

1、清除浮動的相容性（低版本的瀏覽器不相容問題） .clearfix:after{ content:""; clear:both; display:block; visibility:hidden; height:0; } .clear{ *zoom:1; } 2、透明度的相容性 opacity:0 ...
Webpack編譯結果淺析

如今Webpack已經是一個不可或缺的前端構建工具，藉助這個構建工具，我們可以使用比較新的技術（瀏覽器不能直接支持）來開發。你是否好奇你寫的代碼經過Webpack構建之後會生成什麼東西？是否有時調試遇到莫名其妙的問題？本文不講如何進行配置，只是基於幾個基礎的例子，簡要分析一下 webpack@4 ...
webpack4 系列教程(十一)：字體文件處理

教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步 "《webpack4 系列教程(十一)：字體文件處理》原文地址" 。或者來我的小站看更多內容： "godbmw.com" 0. 課程介紹和資料 " 本節課源碼" " 所有課程源碼" 本節課的代碼目錄如下：本節課的內容如下： 1. ...
Array對象常用屬性

concat() 用於連接兩個或多個數組。該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。 every() 用於檢測數組所有元素是否都符合指定條件（通過函數提供）。 every() 方法使用指定函數檢測數組中的所有元素：如果數組中檢測到有一個元素不滿足，則整個表達式返回 false ， ...
DOM事件-調用函數

通過調用函數改變其內容：輸出：點擊出現： ...