分页按钮功能

前言

在前端开发中，分页功能是一个常见的需求，特别是当需要展示大量数据时，它能有效提升用户体验。该文章结合运用了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=5for (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=5for (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.rhkb.cn/news/12168.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SAP HCM 回溯分析

SAP HCM 回溯分析

最近总有人问回溯问题&#xff0c;今天把12年总结的笔记在这共享下&#xff1a; 12年开这个图的时候总是不明白是什么原理&#xff0c;教程看N次&#xff0c;网上资料找一大堆&#xff0c;就是不明白原理&#xff0c;后来为搞明白逻辑&#xff0c;按照教材的数据一样做&#xf…
阅读更多...
gitea - fatal: Authentication failed

gitea - fatal: Authentication failed

文章目录 gitea - fatal: Authentication failed概述run_gitea_on_my_pkm.bat 笔记删除windows凭证管理器中对应的url认证凭证启动gitea服务端的命令行正常用 TortoiseGit 提交代码备注END gitea - fatal: Authentication failed 概述 本地的git归档服务端使用gitea. 原来的用…
阅读更多...
X Window System 架构概述

X Window System 架构概述

X Window System 架构概述 1. X Server 与 X Client ​ 这里引入一张维基百科的图&#xff0c;在Linux系统中&#xff0c;若用户需要图形化界面&#xff0c;则可以使用X Window System&#xff0c;其使用**Client-Server**架构&#xff0c;并通过网络传输相关信息。 ​ ​ X…
阅读更多...
Linux防火墙基础

Linux防火墙基础

一、Linux防火墙的状态机制 1.iptables是可以配置有状态的防火墙&#xff0c;其有状态的特点是能够指定并记住发送或者接收信息包所建立的连接状态&#xff0c;其一共有四种状态&#xff0c;分别为established invalid new related。 established:该信息包已建立连接&#x…
阅读更多...
[论文学习]Adaptively Perturbed Mirror Descent for Learning in Games

[论文学习]Adaptively Perturbed Mirror Descent for Learning in Games

[论文学习]Adaptively Perturbed Mirror Descent for Learning in Games 前言概述前置知识和问题约定单调博弈&#xff08;monotone game&#xff09;Nash均衡和Gap函数文章问题定义Mirror Descent 方法评价 前言 文章链接 我们称集合是紧的&#xff0c;则集合满足&#xff1…
阅读更多...
Go学习：类型转换需注意的点 以及 类型别名

Go学习：类型转换需注意的点 以及 类型别名

目录 1. 类型转换 2. 类型别名 1. 类型转换 在从前的学习中&#xff0c;知道布尔bool类型变量只有两种值true或false&#xff0c;C/C、Python、JAVA等编程语言中&#xff0c;如果将布尔类型bool变量转换为整型int变量&#xff0c;通常采用 “0为假&#xff0c;非0为真”的方…
阅读更多...
使用Pygame制作“吃豆人”游戏

使用Pygame制作“吃豆人”游戏

本篇博客展示如何使用 Python Pygame 编写一个简易版的“吃豆人&#xff08;Pac-Man&#xff09;” 风格游戏。这里我们暂且命名为 Py-Man。玩家需要控制主角在一个网格地图里移动、吃掉散布在各处的豆子&#xff0c;并躲避在地图中巡逻的幽灵。此示例可帮助你理解网格地图、角…
阅读更多...
ubuntu磁盘扩容

ubuntu磁盘扩容

ubuntu磁盘扩容 描述先在虚拟机设置里面扩容进入Ubuntu 配置使用命令行工具parted进行分区输出如下完成 描述 执行命令,查看 fs 类型是什么 lsblk -o NAME,FSTYPE,MOUNTPOINT将60G扩容到100G&#xff0c;其中有些操作我也不知道什么意思&#xff0c;反正就是成功了&#xff0…
阅读更多...
redis底层数据结构

redis底层数据结构

底层数据结构 了解下这些咱常用的数据其底层实现是啥 在提到使用哪类数据结构之前&#xff0c;先来了解下redis底层到底有多少种数据结构 1&#xff0c;sds动态字符串 概念与由来 redis是一种使用C语言编写的nosql&#xff0c;redis存储的key数据均为string结构&#xff0…
阅读更多...
ChatGPT怎么回事？

ChatGPT怎么回事？

纯属发现&#xff0c;调侃一下~ 这段时间deepseek不是特别火吗&#xff0c;尤其是它的推理功能&#xff0c;突发奇想&#xff0c;想用deepseek回答一些问题&#xff0c;回答一个问题之后就回复服务器繁忙&#xff08;估计还在被攻击吧~_~&#xff09; 然后就转向了GPT&#xf…
阅读更多...
趣味Python100例初学者练习01

趣味Python100例初学者练习01

1. 1 抓交通肇事犯 一辆卡车违反交通规则&#xff0c;撞人后逃跑。现场有三人目击该事件&#xff0c;但都没有记住车号&#xff0c;只记下了车号的一些特征。甲说&#xff1a;牌照的前两位数字是相同的&#xff1b;乙说&#xff1a;牌照的后两位数字是相同的&#xff0c;但与前…
阅读更多...
2024-我的学习成长之路

2024-我的学习成长之路

因为热爱&#xff0c;无畏山海
阅读更多...
蓝桥杯备考：高精度算法之除法

蓝桥杯备考：高精度算法之除法

我们除法的高精度其实也不完全是高精度&#xff0c;而是一个高精度作被除数除以一个低精度 模拟我们的小学除法 由于题目中我们的除数最大是1e9&#xff0c;当它真正是1e9的时候&#xff0c;t是有可能超过1e9的&#xff0c;所以要用long long
阅读更多...
Maven jar 包下载失败问题处理

Maven jar 包下载失败问题处理

Maven jar 包下载失败问题处理 1.配置好国内的Maven源2.重新下载3. 其他问题 1.配置好国内的Maven源 打开⾃⼰的 Idea 检测 Maven 的配置是否正确&#xff0c;正确的配置如下图所示&#xff1a; 检查项⼀共有两个&#xff1a; 确认右边的两个勾已经选中&#xff0c;如果没有请…
阅读更多...
【前端】ES6模块化

【前端】ES6模块化

文章目录 1. 模块化概述1.1 什么是模块化?1.2 为什么需要模块化? 2. 有哪些模块化规范3. CommonJs3.1 导出数据3.2 导入数据3.3 扩展理解3.4 在浏览器端运行 4.ES6模块化4.1 浏览器运行4.2 在node服务端运行4.3 导出4.3.1 分别导出4.3.2 统一导出4.3.3 默认导出4.3.4 混用 4.…
阅读更多...
强化学习笔记（5）——PPO

强化学习笔记（5）——PPO

PPO视频课程来源 首先理解采样期望的转换 变量x在p(x)分布下&#xff0c;函数f(x)的期望 等于f(x)乘以对应出现概率p(x)的累加 经过转换后变成 x在q(x)分布下&#xff0c;f(x)*p(x)/q(x) 的期望。 起因是&#xff1a;求最大化回报的期望&#xff0c;所以对ceta求梯度 具体举例…
阅读更多...
20-30 五子棋游戏

20-30 五子棋游戏

20-分析五子棋的实现思路_哔哩哔哩_bilibili20-分析五子棋的实现思路是一次性学会 Canvas 动画绘图&#xff08;核心精讲50个案例&#xff09;2023最新教程的第21集视频&#xff0c;该合集共计53集&#xff0c;视频收藏或关注UP主&#xff0c;及时了解更多相关视频内容。https:…
阅读更多...
【HTML入门】Sublime Text 4与 Phpstorm

【HTML入门】Sublime Text 4与 Phpstorm

文章目录 前言一、环境基础1.Sublime Text 42.Phpstorm(1)安装(2)启动Phpstorm(3)“启动”码 二、HTML1.HTML简介(1)什么是HTML(2)HTML版本及历史(3)HTML基本结构 2.HTML简单语法(1)HTML标签语法(2)HTML常用标签(3)表格(4)特殊字符 总结 前言 在当今的软件开发领域&#xff0c…
阅读更多...
Kubernetes学习之包管理工具（Helm）

Kubernetes学习之包管理工具（Helm）

一、基础知识 1.如果我们需要开发微服务架构的应用&#xff0c;组成应用的服务可能很多&#xff0c;使用原始的组织和管理方式就会非常臃肿和繁琐以及较难管理&#xff0c;此时我们需要一个更高层次的工具将这些配置组织起来。 2.helm架构&#xff1a; chart:一个应用的信息集合…
阅读更多...
Kamailio 不通过 dmq 实现注册复制功能

Kamailio 不通过 dmq 实现注册复制功能

春节期间找到一篇文章&#xff0c;需要 fg 才能看到&#xff1a; https://medium.com/tumalevich/kamailio-registration-replication-without-dmq-65e225f9a8a7 kamailio1 192.168.56.115 kamailio2 192.168.56.116 kamailio3 192.168.56.117 route[HANDLE_REPLICATION] {i…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023