JS实现前端动态分页码

最新推荐文章于 2024-05-16 14:12:36 发布

原创

最新推荐文章于 2024-05-16 14:12:36 发布 · 495 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端基础 #web前端 #前端开发 #JavaScript

本文介绍了使用JavaScript在前端实现动态分页的思路和方法，包括三种情况的处理：当前页面小于4，当前页面等于4，以及当前页面大于4。同时，文章强调了当当前页码小于总页码减2时，显示省略号。内容涵盖前端布局样式、CSS和JavaScript代码实现。

思路分析：有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>
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，