JS实现前端动态分页码

大前端修行

于 2019-11-04 20:45:04 发布

阅读量476

点赞数 1

文章标签：前端前端基础 web前端前端开发 JavaScript

本文链接：https://blog.youkuaiyun.com/daimakk123456/article/details/102905164

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章