美文网首页前端学习
JS实现前端动态分页码

JS实现前端动态分页码

作者: 1194b60087a9 | 来源:发表于2019-05-16 15:14 被阅读0次

思路分析:有3种情况

第一种情况,当前页面curPage < 4

第二种情况,当前页面curPage == 4

第三种情况,当前页面curPage>4

此外,还要考虑,当前页码 curPage < pageTotal(总页码)-2,才显示 …

首先,先是前端的布局样式

<body>

      /*首先,在body中添加div id="pagination" */

      <div id="pagination">

<!-- 后面会在JS中动态追加 ,此处为了,实现前端效果,所以注册

<a id="prevBtn"><</a>

<a id="first">1</a>

<a href="#">2</a>

<a href="#">3</a>

<a href="#">4</a>

<span>...</span>

<a href="#" id="last">10</a>

<a href="#" id="nextBtn">></a>

-->

      </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 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 id="first">1</a><span>...</span>';

        }

        for(let i = starPage;i <= endPage;i++){

            if(i==curPage){

                html += '<a id="first">'+i+'</a>';

            }else{

                html += '<a href="#">'+i+'</a>';

            }

        }

        if(pageTotal<=5){

            html+='<a href="#" id="nextBtn">&gt;</a>';

        }else{

            if(curPage<pageTotal-2){

                html += '<span>...</span>';

            }

            if(curPage<=pageTotal-2){

                html += '<a href="#">'+pageTotal+'</a>';

            }

            html+='<a href="#" id="nextBtn">&gt;</a>';

        }

        return html;

    }

</script>

多年编程经验,今年1月整理了一批2019年最新WEB前端教学视频,不论是零基础想要学习前端还是学完在工作想要提升自己,这些资料都会给你带来帮助,从HTML到各种框架,帮助所有想要学好前端的同学,学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流qun:296,212,562,即可免费获取,学习不怕从零开始,就怕从不开始。

相关文章

网友评论

    本文标题:JS实现前端动态分页码

    本文链接:https://www.haomeiwen.com/subject/jropaqtx.html