JS实现前端动态分页码

最新推荐文章于 2023-03-29 14:48:54 发布
最新推荐文章于 2023-03-29 14:48:54 发布
阅读量390 收藏 4
点赞数 1
文章标签： 前端 前端基础 web前端 前端开发 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daimakk123456/article/details/102905164
版权

思路分析：有3种情况

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

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

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

此外，还要考虑，当前页码 curPage < pageTotal（总页码）-2，才显示 …

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

<body>
      /*首先，在body中添加div id="pagination" */
      <div id="pagination">
<!--
最低0.47元/天 解锁文章
大前端修行
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现分页功能
乔路非
01-29 6477
分页功能： 上一页(判断是否是首页) 下一页(判断是否是尾页) 改变页容量(判断是否>0) 改变当前页码(判断是否存在页码) 去往首页 去往尾页 参数： 页容量、当前页码、总数、所有页码 class Pagination{ constructor(total, pageSize = 10,currentPage = 1) { this.pageSize = pageSize > 0 ? pageSize : 10 // 页容量 this.curr.
js实现前端分页页码管理
10-20
本文主要介绍了js实现前端分页页码管理的具体方法。具有一定的参考价值，下面跟着小编一起来看下吧
JS实现前端动态分页码代码实例
10-15
主要介绍了JS实现前端动态分页码代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
javascript写一个页码器，包括切换页码、分页、上一页/下一页、省略页码等功能
sxww_zyt的博客
02-22 1984
当表格数据太多时，通常需要做成分页。由于项目要求，使用原生js实现一个页码器，满足常规要求：切换页码、分页、上一页/下一页、页码超出时显示省略号，点击省略号往前/后显示几个隐藏的页码。
使用JavaScript实现分页效果
ruancheng3的专栏
11-27 568
应公司需求，有时需要制作静态页面网站，而一旦涉及到文章的分页，实现起来非常麻烦，自己又刚入门，对js不是很熟悉，所以就拿来练练手。 　　首先页面结构如下，分别展示数据跟分页： 1 2 3 4 5 Document 6 7 ol, ul { 8 list-style: none; 9
js中的分页导航
liantaiyou的博客
12-23 133
<!doctype html> Document 上一页 下一页
纯JS实现前端动态分页码
weixin_34293141的博客
10-10 217
思路分析：有3种情况 第一种情况，当前页面curPage < 4 第二种情况，当前页面curPage == 4 第三种情况，当前页面curPage>4 此外，还要考虑，当前页码 curPage < pageTotal（总页码）-2，才显示 ... 首先，先是前端的布局样式 <body> /*首先，在body中添加div ...
JS实现动态页码及分页导航
BXA
01-16 3473
目录前言内容小结 前言 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;最近的项目需要添加一个分页导航的功能，没有用网上封装好的文件。通过JS自己简单实现了效果。下面和大家分享一下。 内容 下图为首次加载后的效果，默认显示5页， 当点击下一页时将选中页面的页码置于中间 小结 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
js实现动态分页
chensuanhua6028的博客
01-20 307
不多说，直接上代码看吧。 <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>html分页显示</title> <scripttype="tex...
【js】js实现动态分页功能（拿来就能用）
firstbird的博客
08-04 3985
js 实现动态分页功能（最详细功能）
js动态分页
09-12
以最简单方式方法实现页面的动态分页，css样式可自定义
js实现table分页可以动态生成table
05-24
js实现table分页可以动态生成table
JS前端分页条，支持前端，后台分页
12-13
JQ编写的一个简单分页条，样式，页面，JS分离，改写代码简单，使用方便。
JS实现分页导航效果
10-15
主要为大家详细介绍了JS实现动态页码及分页导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯JS前端实现分页代码
11-25
先给大家展示下效果图，如果大家感觉效果不错，请参考实现代码： 因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去...
前端打印时js分页实现共几页和第几页
08-06
js前端打印s分页实现共几页和第几页功能，触底自动换页，并每页表头新增固定部分，包括金额大写转换和当前时间获取
分页：页码显示javascript
莫理琴的专栏
04-09 745
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">分页：页码显示javascript var ie=(document.getElementById && document.all); function clearChilds( parentObj){  if ( pare
JavaScript实现后端动态数据分页显示
qq_32284411的博客
03-29 293
mybatis分页数据，前端如何使用javaScript实现展示和分页查询
前端如何实现点击页码切换图片
最新发布
05-03
实现点击页码切换图片，可以考虑以下步骤： 1. 定义一个包含所有图片的数组，每个数组元素都是一个图片的路径。 2. 定义一个变量来表示当前显示的图片的索引，初始值为0。 3. 定义一个函数，用于切换图片。该函数接受一个参数表示要显示的图片的索引。在函数中，先将当前显示的图片隐藏，然后将要显示的图片显示出来，并更新当前显示的图片的索引。 4. 在HTML中创建一个包含页码的容器，并添加相应的页码按钮。 5. 添加事件监听器，当用户点击页码按钮时，调用切换图片函数并传入对应的索引。 以下是一个示例代码： HTML代码： ```html <div id="image-container"> <img src="img1.jpg" class="image"> <img src="img2.jpg" class="image" style="display:none;"> <img src="img3.jpg" class="image" style="display:none;"> </div> <div id="page-container"> <button class="page-button">1</button> <button class="page-button">2</button> <button class="page-button">3</button> </div> ``` CSS代码： ```css .image { max-width: 100%; height: auto; } #page-container { display: flex; } .page-button { margin: 0 10px; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; cursor: pointer; } .page-button.active { background-color: #ccc; color: #fff; } ``` JavaScript代码： ```javascript var images = ['img1.jpg', 'img2.jpg', 'img3.jpg']; var currentIndex = 0; function switchImage(index) { var imageContainer = document.getElementById('image-container'); var images = imageContainer.getElementsByClassName('image'); images[currentIndex].style.display = 'none'; images[index].style.display = 'block'; currentIndex = index; } var pageButtons = document.getElementsByClassName('page-button'); for (var i = 0; i < pageButtons.length; i++) { pageButtons[i].addEventListener('click', function() { var index = parseInt(this.innerText) - 1; switchImage(index); for (var j = 0; j < pageButtons.length; j++) { pageButtons[j].classList.remove('active'); } this.classList.add('active'); }); } ``` 首先定义了一个包含所有图片路径的数组和一个表示当前显示图片索引的变量。然后定义了切换图片的函数switchImage，该函数接受一个参数表示要显示的图片索引。在函数中，先将当前显示的图片隐藏，然后将要显示的图片显示出来，并更新当前显示的图片索引。 接下来，在HTML中创建了一个包含页码按钮的容器，并添加了点击事件监听器。当用户点击页码按钮时，调用切换图片函数switchImage并传入相应的索引。同时，将被点击的页码按钮标记为active状态，以提供视觉反馈。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值