当前位置： 首页 > news >正文

JavaScript实现列表分页（小白版）

news 文章来源：https://blog.csdn.net/weixin_44220078/article/details/129781208 2025/2/7 19:13:24

组件用惯了，突然叫你用纯css+JavaScript写一个分页，顿时就慌了。久久没有接触js了，不知道咋写了。本文章也是借与参考做的一个demo案例，小白看了都会的那种。咱们就以ul列表为例进行分页：

首先模拟的数据列表是这样的，默认有8条数据：

<div class="example"><ul id="list"><li>这是list1</li><li>这是list2</li><li>这是list3</li><li>这是list4</li><li>这是list5</li><li>这是list6</li><li>这是list7</li><li>这是list8</li></ul><ul id="page"></ul>
</div>

在这里插入图片描述
第一步：修改一下样式（一条li标签假如有40px的高度，现在有8个则整个ul有320px；我现在需要进行一个页面显示5条数据；我们就给ul标签调整一下样式）

#list {width:400px;height:200px;margin:10px auto;border:1px solid #ccc;overflow:hidden;
}

固定高度将5条数据显示出来（200px），溢出的li将进行隐藏,就会显示这样：
在这里插入图片描述
第二步.使用js操作将页面的标签进行获取进行后面的处理

    var pageList = document.getElementById("list");var pageLi = pageList.getElementsByTagName("li");var pageBtn = document.getElementById("page");

定义分页并计算页面数量：
上方获li获取标签为8；这里是一个页面显示5条数据所以对pageLi进行取模；为0则是Math.floor不是则是Math.ceil，Math.floor是向下取整（ 1.6 => 1），Math.ceil为向上取整（1.6=>2 ），所以这里n最后等于2，页面为2。

    var n = 0;//定义分页if (pageLi.length % 5 == 0) {//计算页数n = Math.floor(pageLi.length / 5);//向下取整 1.6 => 1} else {n = Math.ceil(pageLi.length / 5);//向上取整 1.6=>2 }

第三步：页面数量得到了就要创建分页标签，因为html只有一个ul标签 我们要将li进行动态生成

    for (var i = 1; i <= n; i++) {pageli2= document.createElement("li");  //创建li元素pageli2.style.cssText = "width:30px;height:30px;background:pink;margin:0 5px;display: inline-block;text-align:center;line-height:30px;color:white";//元素样式pageli2.innerHTML = i; //页面数显示在li标签里pageBtn.appendChild(cLi); //将li加入到ul下}

然后获取分页li进行样式设置

    var aLi = pageBtn.getElementsByTagName("li"); for (var i = 0; i <= n - 1; i++) {aLi[i].index = i; //下标aLi[0].style.background = "pink"; //样式aLi[i].style.left = i * 40 + "px"; //偏移 位置

此时就会出现分页：
在这里插入图片描述
第四步：对分页两个li做点击事件进行分页显示

        aLi[i].onclick = function() {pageIndex = this.index; //获取下标for (var j = 0; j < aLi.length; j++) {aLi[j].style.background = "pink";  //未选中样式}this.style.background = "blue"; //选中样式//3.页面切换for (var j = 0; j < pageLi.length; j++) {pageLi[j].style.display = "none"; //点击第pageIndex页时，让所有页面隐藏}for (var j = (pageIndex * 5); j < (pageIndex + 1) * 5; j++) {//例如pageIndex为0时，则j=0，j<5;就会将1到5的数据显示出来，以此类推）pageLi[j].style.display = "block";}}

看看最终效果为：
在这里插入图片描述
完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用JavaScript实现列表分页</title>
<style>
* {margin:0;padding:0;
}
img {border:0;
}
ol,ul,li {list-style:none;
}
.example {width:100%;height:500px;position:relative;
}
#list {width:400px;height:200px;margin:10px auto;border:1px solid #ccc;overflow:hidden;
}
#list li {width:100%;height:40px;line-height: 40px;font-weight: bold;text-align: center;border-bottom:1px solid #666;
}
#page {width:400px;height:30px;margin:0 auto;border:1px solid #ccc;padding:5px 0;position:relative;overflow:hidden;
}
</style>
</head>
<body>
<div class="example"><ul id="list"><li>这是list1</li><li>这是list2</li><li>这是list3</li><li>这是list4</li><li>这是list5</li><li>这是list6</li><li>这是list7</li><li>这是list8</li></ul><ul id="page"></ul>
</div><script>
window.onload = function() {var pageList = document.getElementById("list");var pageLi = pageList.getElementsByTagName("li");var pageBtn = document.getElementById("page");var n = 0;//定义分页if (pageLi.length % 5 == 0) {//计算页数n = Math.floor(pageLi.length / 5);//向下取整 1.6 => 1} else {n = Math.ceil(pageLi.length / 5);//向上取整 1.6=>2 }//添加页码for (var i = 1; i <= n; i++) {pageli2 = document.createElement("li");pageli2.style.cssText = "width:30px;height:30px;background:pink;margin:0 5px;display: inline-block;text-align:center;line-height:30px;color:white";pageli2.innerHTML = i;pageBtn.appendChild(pageli2);}var aLi = pageBtn.getElementsByTagName("li");for (var i = 0; i <= n - 1; i++) {aLi[i].index = i;aLi[0].style.background = "pink";aLi[i].style.left = i * 40 + "px";// alert(aLi[i].index)aLi[i].onclick = function() {pageIndex = this.index;for (var j = 0; j < aLi.length; j++) {aLi[j].style.background = "pink";}this.style.background = "blue";//3.页面切换for (var j = 0; j < pageLi.length; j++) {pageLi[j].style.display = "none";}for (var j = (pageIndex * 5); j < (pageIndex + 1) * 5; j++) {pageLi[j].style.display = "block";}}}
}
</script>
</body>
</html>

本教程参与于：JS+CSS实现分页的两个方法

相关文章：

JavaScript实现列表分页（小白版）

组件用惯了&#xff0c;突然叫你用纯cssJavaScript写一个分页&#xff0c;顿时就慌了。久久没有接触js了&#xff0c;不知道咋写了。本文章也是借与参考做的一个demo案例&#xff0c;小白看了都会的那种。咱们就以ul列表为例进行分页&#xff1a; 首先模拟的数据列表是这样的&a…...

编程日记 2023/4/13 18:38:25

Python调用GPT3.5接口的最新方法

GPT3.5接口调用方法主要包括openai安装、api_requestor.py替换、接口调用、示例程序说明四个部分。 1 openai安装 Python openai库可直接通过pip install openai安装。如果已经安装openai&#xff0c;但是后续提示找不到ChatCompletion&#xff0c;那么请使用命令“pip instal…...

编程日记 2023/4/13 18:39:35

Java开发 - 拦截器初体验

目录 前言 拦截器 什么是拦截器 拦截器和过滤器 Spring MVC的拦截器 Mybatis的拦截器...

编程日记 2023/4/13 3:22:14

【数据仓库-7】-- 使用维度建模的一些缘由

维度建模是一种用于设计数据仓库和商业智能系统的方法。以下是选择维度建模的两类理由。 1.传统方法，有背书且可靠 易于理解和使用：维度建模使用直观的图形和术语，使得非技术人员也能够理解和使用数据仓库和商业智能系统。 快速开发和部署：维度建模是一种迭代开发方法，能…...

编程日记 2023/4/19 5:53:20

【开发实践】在线考试系统（一） 生成错题知识点的思维导图

一、需求分析设计 笔者开发了一个在线考试系统&#xff0c;导师提出一个需求&#xff1a;添加对考试错题相关知识点的总结。 在question表中关联知识点的编号&#xff0c;题目可能关联多个知识点。这里笔者的设计是&#xff0c;只关联一个知识点&#xff0c;便于维护。 下面是知…...

编程日记 2023/3/27 22:12:34

Java Web 实战 17 - 计算机网络之传输层协议(2)

大家好 , 这篇文章继续给大家讲解 TCP 协议当中的一些操作 , 比如 : 滑动窗口、流量控制、拥塞控制、延时应答、捎带应答、面向字节流这几个提升 TCP 效率的操作 . 我们还会给大家分析 TCP 连接出现异常的时候 , 该如何处理 . 最后会将 TCP 和 UDP 进行比较 上一篇文章的链接也…...

编程日记 2023/4/19 5:54:43

MyBatis＜3＞：动态SQL的使用＜if＞＜trim＞＜where＞＜set＞＜foreach＞

动态SQL是MyBatis的强大特性之一&#xff0c;能够完成不同条件下不同的sql拼接。参考官方文档&#xff1a;https://mybatis.org/mybatis-3/zh/dynamic-sql.html<if>标签看这个场景&#xff0c;有必填字段 和 非必填字段 &#xff0c;当字段不确定是否传入的时候&#xff…...

编程日记 2023/4/12 14:52:21

【超好懂的比赛题解】暨南大学2023东软教育杯ACM校赛个人题解

title : 暨南大学2023东软教育杯ACM校赛 题解 tags : ACM,练习记录 date : 2023-3-26 author : Linno 文章目录暨南大学2023东软教育杯ACM校赛 题解A-小王的魔法B-苏神的遗憾C-神父的碟D-基站建设E-小王的数字F-Uziの真身G-电子围棋H-二分大法I-丁真的小马朋友们J-单车运营K-超…...

编程日记 2023/3/27 21:57:28

go-zero学习及使用中遇到的问题

go-zero学习及使用中遇到的问题1 go-zero入门--单体服务demo1.1 单体服务【官方示例】1.1.1 创建greet服务1.1.2 目录结构1.1.3 编写逻辑1.1.4 启动并访问服务1.2 修改GET入参1.2.1 去除options限制的入参值1.2.2 重启并访问服务1.3 添加post请求【新增方法】1.3.1 修改 greet/…...

编程日记 2023/4/19 5:56:03

CCF-CSP认证 202303 500分题解

202303-1 田地丈量&#xff08;矩阵面积交&#xff09; 矩阵面积交x轴线段交长度*y轴线段交长度 线段交长度&#xff0c;相交的时候是min右端点-max左端点&#xff0c;不相交的时候是0 #include<bits/stdc.h> using namespace std; int n,a,b,ans,x,y,x2,y2; int f(in…...

编程日记 2023/4/13 18:41:19

板内盘中孔设计狂飙，细密间距线路中招

一博高速先生成员&#xff1a;王辉东大风起兮云飞扬&#xff0c;投板兮人心舒畅。赵理工打了哈欠&#xff0c;伸了个懒腰&#xff0c;看了看窗外&#xff0c;对林如烟说道&#xff1a;“春天虽美&#xff0c;但是容易让人沉醉。如烟&#xff0c;快女神节了&#xff0c;要不今晚…...

编程日记 2023/4/19 5:57:35

面试热点题：回溯算法 递增子序列与全排列 II

前言&#xff1a; 如果你一点也不了解什么叫做回溯算法&#xff0c;那么推荐你看看这一篇回溯入门&#xff0c;让你快速了解回溯算法的基本原理及框架 递增子序列 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两…...

编程日记 2023/3/27 21:37:21

怎么找回回收站删除的文件

我们都知道&#xff0c;电脑文件都是放在桌面上的&#xff0c;单独存放或者一起存放在文件夹里。但总会有已用完或者是没用的文件&#xff0c;这让我们不得不对其进行清理。而清空回收站也是不可避免的。如果出现了清空文件中还有我们需要的文件&#xff0c;怎么找回回收站删除…...

编程日记 2023/4/19 5:58:51

dp-打家劫舍

你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。给定一个代表每个房屋存放金额的非…...

编程日记 2023/4/12 14:53:51

C++预处理连接

目录定义常量字符串前缀定义枚举类型Boost C库中常常使用预处理连接来定义宏和模板类Google开源的C单元测试框架gtest&#xff0c;使用预处理连接技术创建测试用例和测试方法C预处理连接&#xff08;Preprocessor Concatenation&#xff09;是一种宏定义技巧&#xff0c;用于将…...

编程日记 2023/4/19 6:00:16

3、DRF实战总结：基于类的视图APIView, GenericAPIView和GenericViewSet视图集（附源码）

前面介绍了什么是符合RESTful规范的API接口&#xff0c;以及使用了基于函数的视图(FBV)编写了对文章进行增删查改的API。在本篇文章将使用基于类的视图(Class-based View, CBV)重写之前的接口。 参考&#xff1a; 1、Django开发总结&#xff1a;Django MVT与MVC设计模式&…...

编程日记 2023/4/13 18:43:37

AutoSAR PduR -AutoSAR PDU常用的使用方式【发送，接收，网关】

总目录链接==>> AutoSAR入门和实战系列总目录 @学前问答： AutoSAR PDU在哪里全局定义的？ AutoSAR PDU涉及到哪些模块？ AutoSAR PDU网关怎么使用？ 文章目录 1 AutoSAR PDU发送2 AutoSAR PDU接收3 AutoSAR PDU网关转发4 答疑解析AutoSAR PDU 怎么样通过PduR 实现与其…...

编程日记 2023/4/14 9:20:16

瑟瑟发抖吧～OpenAI刚刚推出王炸——引入ChatGPT插件，开启AI新生态

5分钟学会使用ChatGPT 插件&#xff08;ChatGPT plugins&#xff09;——ChatGPT生态建设的开端ChatGPT插件是什么OpenAI最新官方blog资料表示&#xff0c;已经在ChatGPT中实现了对插件的初步支持。插件是专门为以安全为核心原则的语言模型设计的工具&#xff0c;可帮助ChatGPT…...

编程日记 2023/4/24 8:25:35

脉诊（切脉、诊脉、按脉、持脉）之法——入门篇

认识脉诊何谓脉诊&#xff1f;脉诊的渊源脉诊重要吗&#xff1f;脉诊确有其事&#xff0c;还是故弄玄虚&#xff1f;中医科学吗&#xff1f;如何脉诊&#xff1f;寸口脉诊法何谓脉诊&#xff1f; 所谓脉诊&#xff0c;就是通过把脉来诊断身体健康状况的一种必要手段。 …...

编程日记 2023/4/15 19:01:53

【十二天学java】day09常用api介绍

1.API 1.1API概述 什么是API API (Application Programming Interface) &#xff1a;应用程序编程接口 java中的API 指的就是 JDK 中提供的各种功能的 Java类&#xff0c;这些类将底层的实现封装了起来&#xff0c;我们不需要关心这些类是如何实现的&#xff0c;只需要学习这…...

编程日记 2023/4/15 19:03:42

软件测试 - 测试用例常见面试题

1.测试用例的要素测试用例是为了实施测试而向被测试的系统提供的一组集合, 这组集合包含 : 测试环境, 操作步骤, 测试数据, 预期结果等要素.例如 : 在 B 站输入框输入一个空格, 检查结果测试用例标题 : 输入框输入空格测试环境 : Windows 系统, 谷歌浏览器-版本 111.0.5563.65&…...

编程日记 2023/3/27 20:47:01

几种常见的API接口分页方案

文章目录1 概述2 分页方案2.1 基于偏移量2.2 基于游标3 重复数据处理3.1 基于时间3.2 基于热度3.3 基于推荐1 概述 列表是互联网产品中很常见的一种内容排列形式&#xff0c;而且列表的数据集往往成千上万&#xff0c;一次性返回全量数据集的场景几乎不存在&#xff0c;所以出…...

编程日记 2023/4/13 18:45:31

【Object 类的方法】

在 Java 中&#xff0c;所有类都继承了 Object 类&#xff0c;因此 Object 类中的方法可以在所有 Java 对象中使用。下面是 Object 类中的一些常用方法介绍&#xff1a; equals(Object obj): 用于判断两个对象是否相等。默认情况下&#xff0c;该方法比较的是两个对象的地址是…...

编程日记 2023/4/19 6:01:40

留用户、补内容，在线音乐暗战不停

在线音乐在人们的日常生活中扮演着愈发重要的角色&#xff0c;尤其是在面临巨大压力时&#xff0c;人们往往更倾向于通过倾听一段音乐来缓解内心的紧张与焦虑。而随着在线音乐用户数量的增长以及付费意愿的增强&#xff0c;在线音乐行业也实现了稳步发展。 经过多年的发展&…...

编程日记 2023/4/19 6:04:27

python--exec

在Python中&#xff0c;eval和exec都是用来执行动态代码的内置函数&#xff0c;但它们的作用和使用方式有所不同。 eval(): 将字符串作为Python表达式进行求值&#xff0c;并返回结果。 exec(): 将字符串作为Python语句进行执行&#xff0c;没有返回值。 eval()的使用范围通常限…...

编程日记 2023/3/27 20:26:55

干货分享！这6个高效率办公软件，总有一个值得你收藏！

分享6款高效办公软件&#xff0c;可以解决你很多需求&#xff0c;职场人一定要知道。每一款都是精挑细的&#xff0c;可能有的已经很大众了&#xff0c;但肯定还有小伙伴不知道&#xff0c;废话不多说&#xff0c;直接看&#xff01;&#xff01; 1、Flomo笔记&#xff1a;记录…...

编程日记 2023/5/5 0:17:15

代码随想录刷题-链表总结篇

文章目录链表理论基础单链表双链表循环链表其余知识点链表理论基础单链表双链表循环链表其余知识点移除链表元素习题我的解法虚拟头结点解法设计链表习题我的解法代码随想录代码反转链表习题双指针递归两两交换链表中的节点习题我的解法代码随想录解法删除链表的倒数第N个节点习…...

编程日记 2023/3/27 20:16:52

C++：指针：什么是野指针

野指针目录1&#xff1a;定义2&#xff1a;野指针常见情形2.1 &#xff1a;未初始化的野指针2.2 所指的对象已经消亡2.3 指针释放之后未置空3&#xff1a;避免野指针1&#xff1a;定义 指向非法的内存地址的指针叫做野指针&#xff08;Wild Pointer&#xff09;&#xff0c;也…...

编程日记 2023/3/27 20:11:50

一线大厂高并发Redis缓存架构

文章目录高并发缓存架构设计架构设计思路完整代码开发规范与优化建议键值设计命令使用客户端的使用扩展布隆过滤器redis的过期键的清除策略高并发缓存架构设计 架构设计思路 首先是一个基础的缓存架构&#xff0c;对于新增、修改操作set会对缓存更新&#xff0c;对于查询操作…...

编程日记 2023/4/15 19:06:25

剑指offer-二维数组中的查找

文章目录题目描述题解一 无脑暴力循环题解二 初始二分法&#x1f315;博客x主页&#xff1a;己不由心王道长&#x1f315;! &#x1f30e;文章说明&#xff1a;剑指offer-二维数组中的查找&#x1f30e; ✅系列专栏&#xff1a;剑指offer &#x1f334;本篇内容&#xff1a;对剑…...

编程日记 2023/3/27 20:01:47

长沙优化网站建设/优化方法

关于图层的几个坐标系。 对于ios来说&#xff0c;坐标系的&#xff08;0&#xff0c;0&#xff09;点在左上角&#xff0c;就是越往下&#xff0c;Y值越大。越往右&#xff0c;X值越大。 一个图层的frame&#xff0c;它是position&#xff0c;bounds&#xff0c;anchorPoint和t…...

编程日记 2025/2/7 18:09:21

ubuntu做的网站架构/天猫关键词排名怎么控制

一. 荣辱不惊每个成功的人, 在别人赞美你的时候, 千万不要沾沾自喜! 因为接下来的就是对你的辱骂。中国的100%媒体和99.99%的网友都是没有脑袋的机构和动物。可以肯定的说, 每个成功的经理人后面都有一群“小人”&#xff0c;他们时刻想毁灭你, 无论是比尔盖茨, 还是张瑞敏&…...

编程日记 2025/2/7 15:54:16

个人网站名称怎么起/适合推广的app有哪些

Flutter的Widget采用的是现代化的React风格&#xff0c;该风格的设计灵感来源于React这么语言。最核心的理念是你可以使用Widget设计界面。Widget通过当前的state和注册信息来描述view应该长成什么样子的。当当前的状态发生了变化后&#xff0c;Widget会重新构建。 一、Hello W…...

编程日记 2025/2/7 14:30:09

兼职做视频的网站/排名优化公司电话

在腾讯云的centos云服务器上如果你要使用图形界面&#xff0c;比如图形界面安装oracle&#xff0c;应该怎么做&#xff1f;今天就和大家分享下图形界面的安装和vnc的搭建&#xff0c;来解决刚才提到的问题。 安装可能导致DNS被清空&#xff0c;所以需要先执行下面命令后再按照…...

编程日记 2025/2/7 11:21:51

没有营业执照可以做网站吗/邵阳疫情最新消息

为什么不使用opacityCSS3 还允许通过opacity 声明来设置元素的透明度。该透明度的值也是一个介于0 到1 之间的小数&#xff08;如将opacity 设置为0.1 表示为10%透明&#xff09;。但是这种透明度与RGBA 及HSLA 有所不同&#xff0c;这种方式设置的透明度会对整个元素产生影响&…...

编程日记 2025/2/7 10:58:19

做视频网站 买带宽/南昌seo网站排名

创业市场 目录 1.重点 2.导图 3.正文 3.1. 市场的概述 3.1.1. 什么是市场？...

编程日记 2025/2/7 7:04:05