歡迎您光臨本站 註冊首頁

JS實現前端動態分頁碼代碼實例

←手機掃碼閱讀     lousu-xi @ 2020-06-10 , reply:0

思路分析:有3種情況

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

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

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

此外,還要考慮,當前頁碼 curPage < pageTotal(總頁碼)-2,才顯示 ...

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

  /*首先,在body中添加div id="pagination" */  1  2  3  4  ...  10  >  -->

 

其次,是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代碼

  pageTotal){        curPage =1;      }      /*總頁數小於5,全部顯示*/      if(pageTotal5){        if(curPage4){          html = appendItem(pageTotal,curPage,html);          paginationId.innerHTML = html;        }      }    }        function appendItem(pageTotal,curPage,html){      var starPage = 0;      var endPage = 0;            html+='';            if(pageTotal5 && curPage1...';      }            for(let i = starPage;i '+i+'';        }else{          html += ''+i+'';        }      }            if(pageTotal>';      }else{        if(curPage...';        }        if(curPage'+pageTotal+'';        }        html+='>';      }      return html;    }" _ue_custom_node_="true">

 


[lousu-xi ] JS實現前端動態分頁碼代碼實例已經有491次圍觀

http://coctec.com/docs/javascript/show-post-237747.html