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

分页按钮功能

article 2025/2/2 5:38:35

前言

在前端开发中，分页功能是一个常见的需求，特别是当需要展示大量数据时，它能有效提升用户体验。该文章结合运用了HTML，CSS，JS实现网页的分页按钮功能，并且可以选择每页显示的条数试试更新总页数及显示当前页和总数据条数。

代码整体功能概述

这段代码实现了一个简单的网页，从 JSON 文件中获取数据并以表格形式展示，同时提供分页功能。用户可以通过点击分页按钮、输入页码或者选择每页显示条数来浏览不同页面的数据。

效果展示

 代码部分

HTML

<div class="content">
			<table>
				<thead>
					<tr>
						<td>id</td>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>111</td>
						<td>222</td>
						<td>333</td>
						<td></td>
					</tr>
				</tbody>
			</table>
</div>

<div class="box"></div>

CSS部分

.box {
				position: fixed;
				left: 23%;
				top: 35%;
				/* border: solid; */
				width: 55%;
				/* background-color: aqua; */
				display: flex;
				justify-content: space-around;
			}

			.box input {
				width: 70px;
			}

			.pageNum {
				width: 20px;
				height: 22px;
				text-align: center;
				font-weight: 600;
				cursor: pointer;
				border: solid 1px;
				border-radius: 5px;
			}

			.endPage,
			.lastPage,
			.nextPage,
			.homePage {
				cursor: pointer;
			}

			.pageNum:hover {
				background-color: gray;
				/* 鼠标悬浮时的背景颜色 */
				color: white;
				/* 鼠标悬浮时的文本颜色 */
			}

			.endPage:hover,
			.lastPage:hover,
			.nextPage:hover,
			.homePage:hover {
				color: red;
			}

			table {
				margin: auto;
				border: solid;
				text-align: center;
				border-collapse: collapse;
				width: 280px;
			}


			th,
			td {
				padding: 10px;
				border: 1px solid black;
				/* 为表格、表头和单元格添加 1px 黑色实线边框 */
			}

			.content {
				/* background-color: darkgray; */
				/* width: 305px; */
				margin: auto;
				max-height: 265px;
				overflow: auto;
			}

			thead {
				height: 55px;
				position: sticky;
				top: 0;
				background-color: white;
				/* 可根据需要修改表头背景颜色 */
				z-index: 1;
				/* 确保表头在滚动时显示在内容之上 */
			}

			.start,
			.end ,
			.NO{
				color: red;
				font-weight: 600;
			}

JS部分

1.变量声明及数据获取部分
  1. 变量声明：定义了 data 用于存储从 JSON 文件获取的数据，pageSize 表示每页显示的记录数，selfPage 记录当前页码，totalPages 表示总页数。
  2. XMLHttpRequest 对象：使用 XMLHttpRequest 来获取 ./js/pages.json 文件的数据。open 方法设置请求方法为 GET，并指定异步请求。send 方法发送请求。
  3. onreadystatechange 事件处理：当 readyState 变为 4（表示请求已完成）且 status 为 200（表示请求成功）时，将响应文本解析为 JSON 格式并存储到 data 中，然后调用 render 函数渲染页面。
let data;
// 每页显示5条
let pageSize = 5;
// 当前页
let selfPage = 0;
// 总页数
let totalPages;
let xhr = new XMLHttpRequest();
xhr.open('get', './js/pages.json', true);
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        let text = xhr.responseText;
        data = JSON.parse(text);
        render(data); // 数据加载成功后渲染页面
        console.log(data);
    }
};
2.页面渲染函数
  1. 计算总页数：使用 Math.ceil(data.length / pageSize) 计算总页数，向上取整以确保所有数据都能展示。
  2. 拼接表格内容：通过循环根据当前页码和每页显示条数，从 data 中提取相应数据并拼接成 HTML 表格行，设置为表格 tbody 的内容。
  3. 拼接分页按钮：
    • 首先拼接当前页码、数据范围、每页显示条数选择框以及首页和上一页按钮。
    • 根据总页数和当前页码的不同情况，生成不同样式的分页按钮。总页数小于 6 时，直接生成所有页码按钮；总页数大于 6 时，根据当前页在前 3 页、后 3 页或中间部分，生成相应的部分页码按钮并加上省略号。
    • 最后拼接前往指定页输入框、下一页和尾页按钮。
  4. 更新页面元素：将拼接好的分页按钮 HTML 代码插入到 .box 容器中，并设置下拉框的当前选中值为 pageSize。
function render(data) {
    // 计算总页数
    //总页数=数据的长度×每页显示的条数，并且向上取整
    totalPages = Math.ceil(data.length / pageSize);
    console.log(totalPages);
    // 内容字符串,后续往里面拼内容
    let textStr = '';
    //selfPage=0，pageSize=5，0×5=0;（0+1）×5=5
    for (let i = selfPage * pageSize; i < (selfPage + 1) * pageSize; i++) {
        //因为上面的for循环条件的原因，所以加一个判断
        //代表到最后一条数据了，就停止循环
        if (i > data.length - 1) {
            break;
        }
        // 拼接data中的name，age，sex数据
        textStr += `<tr>
            <td>${[i+1]}</td>
            <td>${data[i].name}</td>
            <td>${data[i].age}</td>
            <td>${data[i].sex}</td>
        </tr>`;
    }
    //把拼接好的字符串放到tbody里
    document.getElementsByTagName('tbody')[0].innerHTML = textStr;
    // 计算当前页开始和结束的数据编号
    let startPage = selfPage * pageSize + 1;
    let endPage = Math.min((selfPage + 1) * pageSize, data.length);
    // 按钮字符串，后续往里拼分页部分
    let butStr = '';
    // value 表示当用户选择该选项时，该选项所代表的实际值
    butStr += `
        <div>第<span class="NO">${selfPage + 1}</span>页</div> 
        <div >当前页是第<span class="start">${startPage}</span>条-第<span class="end">${endPage}</span>条,共${data.length}条数据</div>
        <select id="show" onchange="selectNum()">
            <option value="5">5条/页</option>
            <option value="10">10条/页</option>
            <option value="20">20条/页</option>
        </select>
        <div class="homePage" onclick="firstPage()">首页</div>
        <div class="lastPage" onclick="lastPage()">上一页</div>
    `;
    // 分页按钮的逻辑
    // 如果总页数小于6的话就生成简单的分页按钮
    if (totalPages < 6) {
        for (let i = 0; i < totalPages; i++) {
            // 当用户点击时.会调用targetPage函数并传i(当前生成的分页按钮所代表的页码)
            //		三元判断：如果当前页和i相等就变色
            butStr += `<div class="pageNum" onclick="targetPage(${i})"${selfPage === i? 'style="background-color:gray;"' : ''}>${i + 1}</div>`;
        }
        // 否则就是大于6页
    } else {
        // 当前页是前3页的话，就生成前3页和后续页的，分页按钮
        if (selfPage < 3) {
            butStr += `
                <div class="pageNum" onclick="targetPage(${0})" ${selfPage === 0? 'style="background-color:gray;"' : ''}>1</div>
                <div class="pageNum" onclick="targetPage(${1})" ${selfPage === 1? 'style="background-color:gray;"' : ''}>2</div>
                <div class="pageNum" onclick="targetPage(${2})" ${selfPage === 2? 'style="background-color:gray;"' : ''}>3</div>
                <div class="pageNum" onclick="targetPage(${3})">4</div>
                <div class="pageNum" onclick="targetPage(${4})">5</div>...
                <div class="pageNum" onclick="targetPage(${totalPages - 1})"${selfPage === totalPages - 1? 'style="background-color:gray;"' : ''}>${totalPages}</div>`;
            // 当前页是最后3页的话，就生成后3页和前面部分页的按钮（在11页点12页的时候，会把14页也渲染出来）
        } else if (selfPage >= totalPages - 3) {
            // 事件传参为总页数-5,但是显示的页数时总页数-4,
            // 少一个是因为传参是数组:从0开始。而显示页数是
            butStr += ` 
                <div class="pageNum" onclick="targetPage(${0})" ${selfPage === 0? 'style="background-color:gray;"' : ''}>1</div>
              ...
                <div class="pageNum" onclick="targetPage(${totalPages - 5})">${totalPages - 4}</div>
                <div class="pageNum" onclick="targetPage(${totalPages - 4})">${totalPages - 3}</div>
                <div class="pageNum" onclick="targetPage(${totalPages - 3})"${selfPage === totalPages - 3? 'style="background-color:gray;"' : ''}>${totalPages - 2}</div>
                <div class="pageNum" onclick="targetPage(${totalPages - 2})"${selfPage === totalPages - 2? 'style="background-color:gray;"' : ''}>${totalPages - 1}</div>
                <div class="pageNum" onclick="targetPage(${totalPages - 1})"${selfPage === totalPages - 1? 'style="background-color:gray;"' : ''}>${totalPages}</div>`;
            //当前页是中间（4 - 18页）的话，就生成前和后几页的分页按钮（点第4页会显示后面的第6页）
        } else {
            butStr += `
                <div class="pageNum" onclick="targetPage(${0})" ${selfPage === 0? 'style="background-color:gray;"' : ''}>1</div>
              ...
                <div class="pageNum" onclick="targetPage(${selfPage - 2})">${selfPage - 1}</div>
                <div class="pageNum" onclick="targetPage(${selfPage - 1})">${selfPage}</div>
                <div class="pageNum" onclick="targetPage(${selfPage})" style="background-color:gray">${selfPage + 1}</div>
                <div class="pageNum" onclick="targetPage(${selfPage + 1})">${selfPage + 2}</div>
                <div class="pageNum" onclick="targetPage(${selfPage + 2})">${selfPage + 3}</div>...
                <div class="pageNum" onclick="targetPage(${totalPages - 1})"${selfPage === totalPages - 1? 'style="background-color:gray;"' : ''}>${totalPages}</div>
            `;
        }
    }
    // 底部分页的后半部分
    butStr += `
        前往<input type="number" class="pages" placeholder="请输入页数">页
        <div class="nextPage" onclick="nextPage()">下一页</div>
        <div class="endPage" onclick="endPage()">尾页</div>
    `;
    // console.log(butStr);
    //把拼好的分页按钮，放到分页的容器里
    document.getElementsByClassName('box')[0].innerHTML = butStr;
    // 更新下拉框的选中状态，点一页显示多少条数据后会跟着变
    document.getElementById('show').value = pageSize;
}
3.分页操作函数
  • 当用户点击分页按钮时调用，将当前页码 selfPage 设置为点击的页码 index，然后调用 render 函数重新渲染页面，展示对应页码的数据。
function targetPage(index) {
    //下标等于当前页
    selfPage = index;
    // 重新调用渲染函数更新一下页面
    render(data);
}
4.下一页函数
  • 点击下一页按钮时调用，检查当前页是否为最后一页，若是则提示用户；否则将当前页码 selfPage 加 1，再调用 render 函数更新页面。
function nextPage() {
    // 如果当前是最后一页的话 ，就不能在下了
    if (selfPage == totalPages - 1) {
        alert('我是有底线的');
        // 当前页++到第二页
    } else {
        selfPage++;
    }
    // 重新调用渲染函数更新一下页面
    render(data);
}
5.上一页函数
  • 点击上一页按钮时调用，检查当前页是否小于 0（防止越界），若是则设为第一页并提示用户；否则将当前页码 selfPage 减 1，然后调用 render 函数更新页面。
function lastPage() {
    if (selfPage < 0) {
        selfPage = 0;
        alert('这就是第一页');
    } else {
        // 当前页--
        selfPage--;
    }
    render(data);
}
6.首页函数
  • 点击首页按钮时调用，将当前页码 selfPage 设为 0，然后调用 render 函数重新渲染页面，显示第一页的数据。
function firstPage() {
    // 让当前页等于0并重新渲染函数更新页面即可
    selfPage = 0;
    render(data);
}
7.尾页函数
  • 点击尾页按钮时调用，将当前页码 selfPage 设为总页数减 1，然后调用 render 函数重新渲染页面，显示最后一页的数据。
function endPage() {
    //让当前页等于总页数（totalPages - 1）的最后一页
    selfPage = totalPages - 1;
    render(data);
}
8.键盘事件（下拉框）
  • 监听文档的 keydown 事件，当用户按下回车键时，获取输入框的值。检查输入值是否为有效页码（整数且在合理范围内），若是则更新当前页码并调用 render 函数；否则提示用户输入有效数字。最后清空输入框。
document.addEventListener("keydown", function(e) {
    // 检查用户按下的是否为回车键
    if (e.key === "Enter") {
        // 获取input框里的值
        let value = document.getElementsByClassName('pages')[0].value.trim();
        //增加判断条件
        //1. 先将value转为数字Number,在使用Number.isInteget检查是否为整数
        // 2.并且把value转为整数(parsInt)并且大于0,防止输入负数
        // 3.并且把value转为整数(parsInt)并且小于等于总页数,防止输入超过页数的数
        if (Number.isInteger(Number(value)) && parseInt(value) > 0 && parseInt(value) <= totalPages) {
            // 令当前页为 转为整数的value-1(因为页是从0开始的,输入的数值是从1开始的.所以-1才更合理)
            selfPage = parseInt(value) - 1;
            render(data);
        } else {
            alert('请输入有效数字');
        }
        // 回车后清空输入框里的值
        document.getElementsByClassName('pages')[0].value = '';
    }
});
9.下拉框处理事件
  • 当下拉框的值改变时调用，将当前页码 selfPage 设为 0，获取下拉框选择的每页显示条数并更新 pageSize，重新计算总页数后调用 render 函数，以新的每页显示条数展示数据。
function selectNum() {
    //令当前页为0,方便按顺序展示数据
    selfPage = 0;
    //获取下拉框里的值
    let value = document.getElementById('show').value;
    //把这个值赋给显示的页数
    pageSize = value;
    //重新计算总页数：数据长度×现实的页数就是总长度,并向下取整
    totalPages = Math.ceil(data.length / pageSize);
    render(data);
}

JS总览

let data;
			// 每页显示5条
			let pageSize = 5;
			// 当前页
			let selfPage = 0;
			// 总页数
			let totalPages;
			let xhr = new XMLHttpRequest();
			xhr.open('get', './js/pages.json', true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					let text = xhr.responseText;
					data = JSON.parse(text);
					render(data); // 数据加载成功后渲染页面
					console.log(data);
				}
			};

			function render(data) {
				// 计算总页数
				//总页数=数据的长度×每页显示的条数，并且向上取整
				totalPages = Math.ceil(data.length / pageSize);
				console.log(totalPages);
				// 内容字符串,后续往里面拼内容
				let textStr = '';
				//selfPage=0，pageSize=5，0×5=0;（0+1）×5=5
				for (let i = selfPage * pageSize; i < (selfPage + 1) * pageSize; i++) {
					//因为上面的for循环条件的原因，所以加一个判断
					//代表到最后一条数据了，就停止循环
					if (i > data.length - 1) {
						break;
					}
					// 拼接data中的name，age，sex数据
					textStr += `<tr>
					<td>${[i+1]}</td>
                      <td>${data[i].name}</td>
                      <td>${data[i].age}</td>
                      <td>${data[i].sex}</td>
                    </tr>`;
				}
				//把拼接好的字符串放到tbody里
				document.getElementsByTagName('tbody')[0].innerHTML = textStr;
				// 计算当前页开始和结束的数据编号
				let startPage = selfPage * pageSize + 1;
				let endPage = Math.min((selfPage + 1) * pageSize, data.length);
				// 按钮字符串，后续往里拼分页部分
				let butStr = '';
				// value 表示当用户选择该选项时，该选项所代表的实际值
				butStr += `
        <div>第<span class="NO">${selfPage + 1}</span>页</div> 
        <div >当前页是第<span class="start">${startPage}</span>条-第<span class="end">${endPage}</span>条,共${data.length}条数据</div>
        <select id="show" onchange="selectNum()">
          <option value="5">5条/页</option>
          <option value="10">10条/页</option>
          <option value="20">20条/页</option>
        </select>
        <div class="homePage" onclick="firstPage()">首页</div>
        <div class="lastPage" onclick="lastPage()">上一页</div>
        `;
				// 分页按钮的逻辑
				// 如果总页数小于6的话就生成简单的分页按钮
				if (totalPages < 6) {
					for (let i = 0; i < totalPages; i++) {
						// 当用户点击时.会调用targetPage函数并传i(当前生成的分页按钮所代表的页码)
						//		三元判断：如果当前页和i相等就变色
						butStr +=
							`<div class="pageNum" onclick="targetPage(${i})"${selfPage === i? 'style="background-color:gray;"' : ''}>${i + 1}</div>`;
					}
					// 否则就是大于6页
				} else {
					// 当前页是前3页的话，就生成前3页和后续页的，分页按钮
					if (selfPage < 3) {
						butStr +=
							`
              <div class="pageNum" onclick="targetPage(${0})" ${selfPage === 0? 'style="background-color:gray;"' : ''}>1</div>
              <div class="pageNum" onclick="targetPage(${1})" ${selfPage === 1? 'style="background-color:gray;"' : ''}>2</div>
              <div class="pageNum" onclick="targetPage(${2})" ${selfPage === 2? 'style="background-color:gray;"' : ''}>3</div>
              <div class="pageNum" onclick="targetPage(${3})">4</div>
              <div class="pageNum" onclick="targetPage(${4})">5</div>...
			  <div class="pageNum" onclick="targetPage(${totalPages - 1})"${selfPage === totalPages - 1? 'style="background-color:gray;"' : ''}>${totalPages}</div>`;
						// 当前页是最后3页的话，就生成后3页和前面部分页的按钮（在11页点12页的时候，会把14页也渲染出来）
					} else if (selfPage >= totalPages - 3) {
						// 事件传参为总页数-5,但是显示的页数时总页数-4,
						// 少一个是因为传参是数组:从0开始。而显示页数是
						butStr +=
							` <div class="pageNum" onclick="targetPage(${0})" ${selfPage === 0? 'style="background-color:gray;"' : ''}>1</div>
							...
              <div class="pageNum" onclick="targetPage(${totalPages - 5})">${totalPages - 4}</div>
              <div class="pageNum" onclick="targetPage(${totalPages - 4})">${totalPages - 3}</div>
              <div class="pageNum" onclick="targetPage(${totalPages - 3})"${selfPage === totalPages - 3? 'style="background-color:gray;"' : ''}>${totalPages - 2}</div>
              <div class="pageNum" onclick="targetPage(${totalPages - 2})"${selfPage === totalPages - 2? 'style="background-color:gray;"' : ''}>${totalPages - 1}</div>
              <div class="pageNum" onclick="targetPage(${totalPages - 1})"${selfPage === totalPages - 1? 'style="background-color:gray;"' : ''}>${totalPages}</div>`;
						//当前页是中间（4-18页）的话，就生成前和后几页的分页按钮（点第4页会显示后面的第6页）
					} else {
						butStr += `
						<div class="pageNum" onclick="targetPage(${0})" ${selfPage === 0? 'style="background-color:gray;"' : ''}>1</div>
						...
              <div class="pageNum" onclick="targetPage(${selfPage - 2})">${selfPage - 1}</div>
              <div class="pageNum" onclick="targetPage(${selfPage - 1})">${selfPage}</div>
              <div class="pageNum" onclick="targetPage(${selfPage})" style="background-color:gray">${selfPage + 1}</div>
              <div class="pageNum" onclick="targetPage(${selfPage + 1})">${selfPage + 2}</div>
              <div class="pageNum" onclick="targetPage(${selfPage + 2})">${selfPage + 3}</div>...
			  <div class="pageNum" onclick="targetPage(${totalPages - 1})"${selfPage === totalPages - 1? 'style="background-color:gray;"' : ''}>${totalPages}</div>
			  `;
					}
				}
				// 底部分页的后半部分
				butStr += `
			前往<input type="number" class="pages" placeholder="请输入页数">页
			<div class="nextPage" onclick="nextPage()">下一页</div>
			<div class="endPage" onclick="endPage()">尾页</div>
			`;
				// console.log(butStr);
				//把拼好的分页按钮，放到分页的容器里
				document.getElementsByClassName('box')[0].innerHTML = butStr;
				// 更新下拉框的选中状态，点一页显示多少条数据后会跟着变
				document.getElementById('show').value = pageSize;
			}

			// 点击页码跳转页面
			// 		在拼接字符串里每一个分页按钮上都绑定了
			function targetPage(index) {
				//下标等于当前页
				selfPage = index;
				// 重新调用渲染函数更新一下页面
				render(data);
			}

			// 下一页
			function nextPage() {
				// 如果当前是最后一页的话 ，就不能在下了
				if (selfPage == totalPages - 1) {
					alert('我是有底线的');
					// 当前页++到第二页
				} else {
					selfPage++;
				}
				// 重新调用渲染函数更新一下页面
				render(data);
			}

			// 上一页,和下一页逻辑一样
			function lastPage() {
				if (selfPage < 0) {
					selfPage = 0;
					alert('这就是第一页');
				} else {
					// 当前页--
					selfPage--;
				}
				render(data);
			}

			// 首页
			function firstPage() {
				// 让当前页等于0并重新渲染函数更新页面即可
				selfPage = 0;
				render(data);
			}

			// 尾页
			function endPage() {
				//让当前页等于总页数（totalPages - 1）的最后一页
				selfPage = totalPages - 1;
				render(data);
			}

			//回车跳转
			// 		给整个文档上事件监听，键盘事件
			document.addEventListener("keydown", function(e) {
				// 检查用户按下的是否为回车键
				if (e.key === "Enter") {
					// 获取input框里的值
					let value = document.getElementsByClassName('pages')[0].value.trim();
					//增加判断条件
					//1. 先将value转为数字Number,在使用Number.isInteget检查是否为整数
					// 2.并且把value转为整数(parsInt)并且大于0,防止输入负数
					// 3.并且把value转为整数(parsInt)并且小于等于总页数,防止输入超过页数的数
					if (Number.isInteger(Number(value)) && parseInt(value) > 0 && parseInt(value) <= totalPages) {
						// 令当前页为 转为整数的value-1(因为页是从0开始的,输入的数值是从1开始的.所以-1才更合理)
						selfPage = parseInt(value) - 1;
						render(data);
					} else {
						alert('请输入有效数字');
					}
					// 回车后清空输入框里的值
					document.getElementsByClassName('pages')[0].value = '';
				}
			});

			//下拉框的onchange事件
			function selectNum() {
				//令当前页为0,方便按顺序展示数据
				selfPage = 0;
				//获取下拉框里的值
				let value = document.getElementById('show').value;
				//把这个值赋给显示的页数
				pageSize = value;
				//重新计算总页数：数据长度×现实的页数就是总长度,并向下取整
				totalPages = Math.ceil(data.length / pageSize);
				render(data);
			}

JSON数据

[{
	"name": "杨过",
	"age": 20,
	"sex": "男"
}, {
	"name": "小龙女",
	"age": 19,
	"sex": "女"
}, {
	"name": "黄飞鸿",
	"age": 22,
	"sex": "男"
}, {
	"name": "蔡徐坤",
	"age": 19,
	"sex": "男"
}, {
	"name": "刘德华",
	"age": 19,
	"sex": "男"
}, {
	"name": "塞罗",
	"age": 1999,
	"sex": "男"
}, {
	"name": "迪迦",
	"age": 2222,
	"sex": "男"
}, {
	"name": "神仙",
	"age": 8888,
	"sex": "女"
}, {
	"name": "神仙",
	"age": 9999,
	"sex": "男"
}, {
	"name": "张三",
	"age": 19,
	"sex": "男"
}, {
	"name": "李四",
	"age": 20,
	"sex": "男"
}, {
	"name": "王五",
	"age": 21,
	"sex": "男"
}, {
	"name": "赵六",
	"age": 22,
	"sex": "男"
}, {
	"name": "杨好滴",
	"age": 20,
	"sex": "女"
}, {
	"name": "郑数据",
	"age": 19,
	"sex": "女"
}, {
	"name": "李氏含",
	"age": 22,
	"sex": "男"
}, {
	"name": "张刹车",
	"age": 19,
	"sex": "男"
}, {
	"name": "汉斯里",
	"age": 20,
	"sex": "女"
}, {
	"name": "黄思敏",
	"age": 19,
	"sex": "女"
}, {
	"name": "彭于晏",
	"age": 22,
	"sex": "男"
}, {
	"name": "黑鹿",
	"age": 19,
	"sex": "男"
}, {
	"name": "杨过",
	"age": 20,
	"sex": "女"
}, {
	"name": "小龙女",
	"age": 19,
	"sex": "女"
}, {
	"name": "黄飞鸿",
	"age": 22,
	"sex": "男"
}, {
	"name": "蔡徐坤",
	"age": 19,
	"sex": "男"
}, {
	"name": "杨过",
	"age": 20,
	"sex": "女"
}, {
	"name": "小龙女",
	"age": 19,
	"sex": "女"
}, {
	"name": "黄飞鸿",
	"age": 22,
	"sex": "男"
}, {
	"name": "蔡徐坤",
	"age": 19,
	"sex": "男"
}, {
	"name": "杨过",
	"age": 20,
	"sex": "女"
}, {
	"name": "小龙女",
	"age": 19,
	"sex": "女"
}, {
	"name": "黄飞鸿",
	"age": 22,
	"sex": "男"
}, {
	"name": "蔡徐坤",
	"age": 19,
	"sex": "男"
}, {
	"name": "杨过",
	"age": 20,
	"sex": "女"
}, {
	"name": "小龙女",
	"age": 19,
	"sex": "女"
}, {
	"name": "杨过",
	"age": 20,
	"sex": "女"
}, {
	"name": "小龙女",
	"age": 19,
	"sex": "女"
}, {
	"name": "黄飞鸿",
	"age": 22,
	"sex": "男"
}, {
	"name": "蔡徐坤",
	"age": 19,
	"sex": "男"
}, {
	"name": "刘德华",
	"age": 19,
	"sex": "男"
}, {
	"name": "塞罗",
	"age": 1999,
	"sex": "男"
}, {
	"name": "迪迦",
	"age": 2222,
	"sex": "男"
}, {
	"name": "奥特之母",
	"age": 8888,
	"sex": "女"
}, {
	"name": "神仙",
	"age": 9999,
	"sex": "男"
}, {
	"name": "张三",
	"age": 19,
	"sex": "男"
}, {
	"name": "李四",
	"age": 20,
	"sex": "男"
}, {
	"name": "王五",
	"age": 21,
	"sex": "男"
}, {
	"name": "赵六",
	"age": 22,
	"sex": "男"
}, {
	"name": "杨好滴",
	"age": 20,
	"sex": "女"
}, {
	"name": "郑数据",
	"age": 19,
	"sex": "女"
}, {
	"name": "李氏含",
	"age": 22,
	"sex": "男"
}, {
	"name": "张刹车",
	"age": 19,
	"sex": "男"
}, {
	"name": "汉斯里",
	"age": 20,
	"sex": "女"
}, {
	"name": "黄思敏",
	"age": 19,
	"sex": "女"
}, {
	"name": "彭于晏",
	"age": 22,
	"sex": "男"
}, {
	"name": "黑鹿",
	"age": 19,
	"sex": "男"
}, {
	"name": "杨过",
	"age": 20,
	"sex": "女"
}, {
	"name": "小龙女",
	"age": 19,
	"sex": "女"
}, {
	"name": "黄飞鸿",
	"age": 22,
	"sex": "男"
}, {
	"name": "蔡徐坤",
	"age": 19,
	"sex": "男"
}, {
	"name": "杨过",
	"age": 20,
	"sex": "女"
}, {
	"name": "车座子",
	"age": 19,
	"sex": "女"
}, {
	"name": "黄飞鸿",
	"age": 22,
	"sex": "男"
}, {
	"name": "蔡徐坤",
	"age": 19,
	"sex": "男"
}, {
	"name": "杨过",
	"age": 20,
	"sex": "女"
}, {
	"name": "小龙女",
	"age": 19,
	"sex": "女"
}, {
	"name": "黄飞鸿",
	"age": 22,
	"sex": "男"
}]


http://www.kler.cn/a/528060.html

相关文章：

  • 6.二分算法
  • 基于Django的Boss直聘IT岗位可视化分析系统的设计与实现
  • PYH与MAC的桥梁MII/MIIM
  • SpringBoot笔记
  • 计算机网络 （62）移动通信的展望
  • langchain基础（二）
  • 区块链项目孵化与包装设计：从概念到市场的全流程指南
  • Github 2025-02-01 开源项目月报 Top20
  • 使用PyQt5绘制带有刻度的温度计控件
  • 第十二章 I 开头的术语
  • Java数据结构和算法(一)
  • 【Java异步编程】CompletableFuture综合实战：泡茶喝水与复杂的异步调用
  • 【机器学习】自定义数据集 使用pytorch框架实现逻辑回归并保存模型，然后保存模型后再加载模型进行预测，对预测结果计算精确度和召回率及F1分数
  • 【愚公系列】《循序渐进Vue.js 3.x前端开发实践》040-Vue过渡动画
  • git基础使用--1--版本控制的基本概念
  • Flutter常用Widget小部件
  • 数据结构 树2
  • Spring Boot 实例解析：从概念到代码
  • STM32 01 LED
  • [原创](Modern C++)现代C++的关键性概念: 流格式化
  • 网络基础
  • 8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
  • 【Git】初识Git Git基本操作详解
  • XML Schema 数值数据类型
  • 物联网 STM32【源代码形式-ESP8266透传】连接OneNet IOT从云产品开发到底层MQTT实现，APP控制 【保姆级零基础搭建】
  • 50. 正点原子官方系统镜像烧写实验