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

网站建设需要哪些信息企业网站制作开发

news 2025/8/10 16:52:19

网站建设需要哪些信息,企业网站制作开发,网站建设和网站设计,专业网站设计建站分页功能如下： 数据分页显示，每页显示若干条数据，默认当前页码为第一页。例如：每页5条数据，则第一页显示 1-5 条，第二页显示 6-10 条，依此类推。当页码为第一页时，上一页为禁用状态…

分页功能如下：

数据分页显示，每页显示若干条数据，默认当前页码为第一页。例如：每页5条数据，则第一页显示 1-5 条，第二页显示 6-10 条，依此类推。
当页码为第一页时，上一页为禁用状态，点击无任何变化。
当页码为最后一页时，下一页为禁用状态，点击无任何变化。
正确显示当前页数和总页数。

首先，要显示的数据如下：

// 课外书列表const bookList = [{"name": "带你从入门到实战全面掌握 uni-app","price": 8900},{"name": "初中级前端工程师面试宝典","price": 4900},{"name": "微信公众号开发入门","price": 3900},{"name": "从零入门 React 通关指北","price": 8900},{"name": "Flask 框架基础","price": 9800},{"name": "JavaScript 从零构建音乐播放器","price": 8900},{"name": "微信小程序开发入门","price": 1490},{"name": "SpringBoot+Thymeleaf 开发 BBS 论坛","price": 13900},{"name": "Vue.js 3 + Node.js 实现线上聊天室","price": 8800},{"name": "Express.js 实现前后端分离的博客系统","price": 8900},{"name": "经典项目：前后端分离网盘系统实战","price": 8900},{"name": "21 个实验带你快速开发 Django 博客系统","price":1000},{"name": "React Hook 打造精美在线记账本","price": 8900},{"name":'红楼梦',"price": 5900},{"name": "Three.js 在网页中创建 3D 动画","price": 6400},{"name": "Web 前端高级开发技术","price": 16900}]

html结构如下：

<body><div id="list"><ul class="list-group"><li>书名：?,一本要10元</li><li>书名：?,一本要10元</li><li>书名：?,一本要10元</li><li>书名：?,一本要10元</li></ul></div><div><button disabled="false" id="prev">上一页</button><button id="next">下一页</button></div><p id="pagination">共?页，当前?页</p>
</body>

我们可以定义当前页数为pageNum，总页数为maxPage，每页显示的数据为limit条。

let pageNum = 1; // 当前页数，默认为1
const limit = 5; // 每页显示多少条数据
const maxPage = Math.ceil(bookList.length / limit); // 最大页数

当前显示数据索引受pageNum和limit影响。

如果是第一页，即pageNum为1时，则显示数据所对应的索引为0_{4；第二页，pageNum为2时，为5}9；第三页，pageNum为3时，为10~14。

用变量来表示为：(pageNum-1)limit ~ pageNumlimit

所以，我们书写一个更新页面的函数，并在一开始的时候就调用该函数进行初始化页面。

// 更新页面数据（n当前页数）
function updataData(n) {const listGroup = document.querySelector(".list-group")const pagination = document.getElementById("pagination")// 清空所有数据listGroup.innerHTML = ''// 循环遍历每一条数据for (let i = (n - 1) * limit; i < n * limit; i++) {const obj = bookList[i]// 如果有值才添加到元素中。// 防止在最后一页时，数据条数小于limit，获取的obj为undefind，出现报错。obj && (listGroup.innerHTML += `<li>书名：《${obj.name}》，价格为${obj.price}元</li>`)}// 更新当前页数和总页数pagination.innerHTML = `共${maxPage}页，当前${pageNum}页`
}

在点击下一页按钮时，需要更新当前页数（pageNum++）和当前页面显示的数据（调用updataData函数），最终还要更新按钮的状态，如果已经到了最后一页，则要将下一页按钮的状态设置为无法选中。

const prev = document.getElementById("prev");
// 点击下一页
next.onclick = function () {// 如果当前页是最后一页了，则不做任何操作if (pageNum === maxPage) returnpageNum++updataData(pageNum)next.disabled = pageNum >= maxPage ? true : false
};

不过这样做有个问题，”上一页”按钮一开始就被设置为disabled，点击下一页，也就是跳转到第2页的时候，此时还是不能点击上一页按钮。

因此，在点击下一页时，还要根据当前页数，改变上一页按钮的状态，我们可以定义一个函数来实现更新按钮状态。

// 更新按钮状态
function updateBtnStatu(pageNum) {prev.disabled = pageNum <= 1 ? true : falsenext.disabled = pageNum >= maxPage ? true : false
}
const next = document.getElementById("next");
// 点击下一页
next.onclick = function () {// 如果当前页是最后一页了，则不做任何操作if (pageNum === maxPage) returnpageNum++updataData(pageNum)updateBtnStatu(pageNum)};

点击上一页同理。

// 更新按钮状态
const prev = document.getElementById("prev");
// 点击上一页
prev.onclick = function () {// 如果当前页是第一页，则不做任何操作if (pageNum === 1) returnpageNum--updataData(pageNum)updateBtnStatu(pageNum)
};

源代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {text-align: center;}li {list-style: none;margin-bottom: 20px;}#list {width: 450px;height: 300px;margin: 30px auto;text-align: center;padding: 20px;border: 3px solid skyblue;}</style>
</head><body><div id="list"><ul class="list-group"><li>书名：?,一本要10元</li><li>书名：?,一本要10元</li><li>书名：?,一本要10元</li><li>书名：?,一本要10元</li></ul></div><div><button disabled="false" id="prev">上一页</button><button id="next">下一页</button></div><p id="pagination">共?页，当前?页</p>
</body>
<script>// 课外书列表const bookList = [{"name": "带你从入门到实战全面掌握 uni-app","price": 8900},{"name": "初中级前端工程师面试宝典","price": 4900},{"name": "微信公众号开发入门","price": 3900},{"name": "从零入门 React 通关指北","price": 8900},{"name": "Flask 框架基础","price": 9800},{"name": "JavaScript 从零构建音乐播放器","price": 8900},{"name": "微信小程序开发入门","price": 1490},{"name": "SpringBoot+Thymeleaf 开发 BBS 论坛","price": 13900},{"name": "Vue.js 3 + Node.js 实现线上聊天室","price": 8800},{"name": "Express.js 实现前后端分离的博客系统","price": 8900},{"name": "经典项目：前后端分离网盘系统实战","price": 8900},{"name": "21 个实验带你快速开发 Django 博客系统","price": 1000},{"name": "React Hook 打造精美在线记账本","price": 8900},{"name": '红楼梦',"price": 5900},{"name": "Three.js 在网页中创建 3D 动画","price": 6400},{"name": "Web 前端高级开发技术","price": 16900}]let pageNum = 1; // 当前页数，默认为1const limit = 5; // 每页显示多少条数据const maxPage = Math.ceil(bookList.length / limit); // 最大页数const prev = document.getElementById("prev");const next = document.getElementById("next");// 初始化数据updataData(pageNum)// 更新页面数据（n当前页数）function updataData(n) {const listGroup = document.querySelector(".list-group")const pagination = document.getElementById("pagination")// 清空所有数据listGroup.innerHTML = ''// 循环遍历每一条数据for (let i = (n - 1) * limit; i < n * limit; i++) {const obj = bookList[i]// 如果有值才添加到元素中。// 防止在最后一页时，数据条数小于limit，获取的obj为undefind，出现报错。obj && (listGroup.innerHTML += `<li>书名：《${obj.name}》，价格为${obj.price}元</li>`)}// 更新当前页数和总页数pagination.innerHTML = `共${maxPage}页，当前${pageNum}页`}// 更新按钮状态function updateBtnStatu(pageNum) {prev.disabled = pageNum <= 1 ? true : falsenext.disabled = pageNum >= maxPage ? true : false}// 点击上一页prev.onclick = function () {// 如果当前页是第一页，则不做任何操作if (pageNum === 1) returnpageNum--updataData(pageNum)updateBtnStatu(pageNum)};// 点击下一页next.onclick = function () {// 如果当前页是最后一页了，则不做任何操作if (pageNum === maxPage) returnpageNum++updataData(pageNum)updateBtnStatu(pageNum)};
</script></html>