js實作分頁的效果實例-js教程-PHP中文網

首頁

web前端

js教程

js實作分頁的效果實例

小云云

Mar 19, 2018 pm 05:01 PM

javascript實例效果

想必大家都用過百度查找過我們想要的信息，每次我們查找東西的時候，百度都會返給我們很多很多相似和有關的結果，而這些結果是不可能一頁就顯示完全的，通常會分很多很多頁，效果圖如下。所以我們今天就是要分享一下，這個分頁效果是怎麼達成的。

js實作分頁的效果實例

首先我們觀察這個分頁

#一頁中顯示的頁碼數是固定的
當期頁碼大於等於2的時候，開始顯示'上一頁'按鈕，當總頁數比目前顯示的頁碼大於等於1的時候，開始顯示'下一頁'按鈕的按鈕
如果我們想要新增'首頁'和'尾頁'按鈕的話，那當首頁不能在頁面顯示的時候，新增'首頁'按鈕。如果尾頁不能顯示在頁面的時候新增『尾頁』按鈕。
上面的情況確定之後，就是要進行細分的了，分情況進行討論。首先我們分兩大種情況：當頁面顯示的頁數大於等於總頁數的時候以及當頁面顯示的頁數小於總頁數的時候兩種情況。前一種情況比較簡單，就不再細說了，主要是當總頁數比頁面能顯示的頁數大的時候還要分三種情況：1、當前頁的頁碼小於等於頁面中能顯示頁數的二分之一時2、當前頁為最後的幾頁的時候，以及除了上面兩種情況的其他的情況。

文字描述可能有點難懂，所以接下來我們直接上例子，js中有詳細的註解方便理解（首先說明，頁面中顯示的頁數為5，至於有多少頁如果在實際專案中應該是透過ajax動態取得資料的，然後根據資料的多少自動取得總頁數。為了方便理解這裡我是用的模擬資料）

HTML程式碼：

<ul id="ul1"></ul>
<p id="p1">
    <!--<a href="#1">首页</a>
    <a href="#3">上一页</a>
    <a href="#2">[2]</a>
    <a href="#3">[3]</a>
    <a href="#4">4</a>
    <a href="#5">[5]</a>
    <a href="#6">[6]</a>
    <a href="#5">下一页</a>
    <a href="#10">尾页</a>-->
</p>

註解的部分是我們要透過js動態加入的。

CSS程式碼：

    <style>
        *{ margin:0; padding:0;}
        li{ list-style:none;}
        #ul1{ width:600px; height:250px;}
        #ul1 li{ width:100px; height:100px; background:red; float:left; overflow:hidden; margin:10px;}
        a{ margin:5px;}
    </style>

js程式碼：

    var json = {
        title : [
            &#39;效果1&#39;,
            &#39;效果2&#39;,
            &#39;效果3&#39;,
            &#39;效果4&#39;,
            &#39;效果5&#39;,
            &#39;效果6&#39;,
            &#39;效果7&#39;,
            &#39;效果8&#39;,
            &#39;效果9&#39;,
            &#39;效果10&#39;,
            &#39;效果11&#39;,
            &#39;效果12&#39;,
            &#39;效果13&#39;,
            &#39;效果14&#39;,
            &#39;效果15&#39;,
            &#39;效果16&#39;,
            &#39;效果17&#39;,
            &#39;效果18&#39;,
            &#39;效果19&#39;,
            &#39;效果20&#39;,
            &#39;效果21&#39;,
            &#39;效果22&#39;,
            &#39;效果23&#39;,
            &#39;效果24&#39;,
            &#39;效果25&#39;,
            &#39;效果26&#39;,
            &#39;效果27&#39;,
            &#39;效果28&#39;,
            &#39;效果29&#39;,
            &#39;效果30&#39;,
            &#39;效果31&#39;,
            &#39;效果32&#39;,
            &#39;效果33&#39;,
            &#39;效果34&#39;,
            &#39;效果35&#39;,
            &#39;效果36&#39;,
            &#39;效果37&#39;,
            &#39;效果38&#39;,
            &#39;效果39&#39;,
            &#39;效果40&#39;,
            &#39;效果41&#39;,
            &#39;效果42&#39;,
            &#39;效果43&#39;,
            &#39;效果44&#39;,
            &#39;效果45&#39;,
            &#39;效果46&#39;,
            &#39;效果47&#39;,
            &#39;效果48&#39;,
            &#39;效果49&#39;,
            &#39;效果50&#39;,
            &#39;效果51&#39;
        ]
    };

    var arr=[];
    var iNow = 9;
    page({
        id:&#39;p1&#39;,
        nowNum:1,
        allNum:Math.floor(json.title.length/10),
        callBack:function(){alert(0)}
    });

    function page(opt){
        if(!opt.id){
            return false;
        }
        var obj = document.getElementById(opt.id);
        var nowNum = opt.nowNum||1;
        var allNum = opt.allNum||5;
        var callBack = opt.callBack||function(){};
        if(nowNum>=4&&allNum>=6){//首页出现的情况，就是当现在的页码大于等于4并且总页码大于等于6时
            var oA = document.createElement(&#39;a&#39;);
            oA.href = &#39;#1&#39;;
            oA.innerHTML = &#39;首页&#39;;
            obj.appendChild(oA);
        }
        if(nowNum>=2){//只要页码大于等于2就会出现上一页
            var oA = document.createElement(&#39;a&#39;);
            oA.href = &#39;#&#39;+(nowNum - 1);
            oA.innerHTML = &#39;上一页&#39;;
            obj.appendChild(oA);
        }
        if(allNum<=5){//因为我们让一页最多显示5个页码，所以，如果总页码小与等于5，就说明页码可以显示完全
            for(var i=1;i<=allNum;i++){
                var oA = document.createElement(&#39;a&#39;);
                oA.href = &#39;#&#39;+i;
                if(nowNum==i){
                    oA.innerHTML = i;
                }else{
                    oA.innerHTML = &#39;[&#39;+i+&#39;]&#39;;
                }
                obj.appendChild(oA);
            }
        }
        else{//下面的情况是当总页码大于5的时候进行的分类
            for(var i=1; i<=5;i++){
                var oA = document.createElement(&#39;a&#39;);
                if(nowNum == 1||nowNum==2){//在总页数大于5的情况下继续根据当前页进行细分。如果当前的页为1或者为2的时候
                    oA.href = &#39;#&#39;+i;
                    if(nowNum ==i){
                        oA.innerHTML = i;
                    }else{
                        oA.innerHTML = &#39;[&#39;+i+&#39;]&#39;
                    }
                }else if((allNum - nowNum)==0||(allNum - nowNum)==1){//如果当前页为最后一页或者倒数第二页的时候，说明显示的5页即为最后5页，所以就是下面的公式
                    oA.href = &#39;#&#39;+(allNum - 5+i);
                    if((allNum - nowNum)==0&&i==5){
                        oA.innerHTML = (allNum - 5 + i);
                    }else if((allNum - nowNum)==1&&i==4){
                        oA.innerHTML = (allNum - 5 +i);
                    }else{
                        oA.innerHTML = &#39;[&#39;+(allNum - 5 +i)+&#39;]&#39;
                    }
                }else{//当前页码处在5个页码的中间的时候
                    oA.href = &#39;#&#39;+(nowNum - 3 +i);
                    if(i==3){
                        oA.innerHTML = (nowNum - 3 + i);
                    }else{
                        oA.innerHTML = &#39;[&#39;+(nowNum - 3 +i)+&#39;]&#39;
                    }
                }
                obj.appendChild(oA);
            }
        }
        if((allNum - nowNum)>=1){//如果总页数比当前页码大于等于1的时候显示‘下一页’
            var oA = document.createElement(&#39;a&#39;);
            oA.href = &#39;#&#39;+(nowNum+1);
            oA.innerHTML = &#39;下一页&#39;;
            obj.appendChild(oA);
        }
        if((allNum - nowNum)>=3&&allNum>=6){//如果总页数比当前页码大于等于3并且总页码大于等于6的时候显示‘尾页’；
            var oA = document.createElement(&#39;a&#39;);
            oA.href = &#39;#&#39;+allNum;
            oA.innerHTML = &#39;尾页&#39;;
            obj.appendChild(oA);

        }
        callBack(nowNum,allNum);
        var aA = obj.getElementsByTagName(&#39;a&#39;);
        for(var i=0; i<aA.length;i++){
            aA[i].onclick = function(){
                var nowNum = parseInt(this.getAttribute(&#39;href&#39;).substring(1));//得到当前的页码数
                obj.innerHTML = &#39;&#39;;
                page({
                    id : opt.id,
                    nowNum : nowNum,
                    allNum : allNum,
                    callBack : callBack}

                );
                return false;
            }
        }
    }

相關推薦：

關於php分頁程式碼的簡單實作

#php實作仿百度分頁

jquery怎麼做出分頁效果

以上是js實作分頁的效果實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。