纯JS实现前端动态分页码

时间: 2018-10-11阅读: 217标签: 前端

思路分析:有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>

来源:https://www.cnblogs.com/littleboyck/archive/2018/10/10/9769051.html


前端能力和后端能力

前端能力和后端能力常常有类比说:人是有操作系统的。譬如我们需要构建自己的操作系统,我们都需要不断升级自己的操作系统 等等,其实更简单一些说,人就如同一个程序,如果这个系统很烂,体验很差。那他做出来的事情,输出出来的东西,就是一团乱麻,没什么实际价值。

一份超全的 web 前端技术进阶指南

优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力。前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识

前端和后端的区别_为什么很多人选择前端?

什么是前端什么是后端,前端开发和后台开发是有区别的,工作的内容和负责的东西是完全的不同的,下面简单说一下:前端更容易入门,每天调整界面的展示,通过代码 完成优美的界面和酷炫的交互。后端入门稍困难,每天关注的是业务逻辑的处理,数据的增删改查,性能的优化

前端需要了解的后端知识

一名有前端工程师,除了掌握自身知识体系外,在业余时间也应该了解下后端的知识时间,由于前端与后端工作是最最密切相关的,多学习些后端知识对自身也是大有好处的。当然除了上述这些,计算机网络、数据结构和算法、计算机组成和原理、离散数学等知识都要涉及。

互联网前端现在这么多人,做前端还有出路吗?

前端能不能一直做,做前端能走多远?以后前端领域会不会被其他新的技术取代?又或者是面临着前端行业的萎缩,导致自己的失业?所有很多人对前端产生了一种所谓的认为:前端不能一直做下去。

女生30 岁转行做前端开发,晚吗?

30岁转行做前端程序开发!请把“晚吗”去掉。50多岁大爷都学编程了。你还担心啥?先从年龄上来说,这个年龄进入IT职业,那是相当棒的黄金时间,有目标,有干劲,有新颖的思想,而且仍是女孩子。

前端如何高效的与后端协作开发

前端与后端的分离,能使前端的开发脱离后端的开发模式,拥有更大的自由度,以此便可做前端工程化、组件化、单页面应用等。不管工具多么厉害,很多时候都免不了要当面沟通,友好、心平气和的沟通也是很重要的哩!

合格的前端不少,优秀的不多

同样的前端工作,有人的工作输出确实是更加的优秀。人与人之间,真的有很大的差别。 今天,我们就来聊一下身边的优秀的前端,是怎样对待前端这份工作的?总结了几点

谈前端框架的『御剑之道』

重视『特性』,而不是语法与API,如果想达到登峰造极的境界,就不要过于专注手里的剑。框架既是神兵利器,也是枷锁。既赋予我们力量,也束缚着我们。若想挣脱这个枷锁,就要达到手中无剑,心中有剑的境界

多种认证、授权模型的比较

本文主要列举在如今前后端分离、手机App大行其道的现状下,用户认证、授权的几种做法及对比。本文假设你已经理解了各种认证模式的具体细节。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告合作文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯