js 下一页原码

在JavaScript中实现“下一页”功能，通常涉及到页面导航或者分页逻辑的处理。下面是一个简单的示例，展示了如何使用JavaScript来处理分页逻辑，并实现“下一页”的功能。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页示例</title>
</head>
<body>
    <div id="content"></div>
    <button id="nextPage">下一页</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

// 假设我们有一些数据需要分页显示
const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

// 每页显示的数据量
const pageSize = 10;

// 当前页码
let currentPage = 0;

// 获取页面内容和按钮元素
const contentDiv = document.getElementById('content');
const nextPageButton = document.getElementById('nextPage');

// 显示当前页的数据
function displayPage(page) {
    const start = page * pageSize;
    const end = start + pageSize;
    contentDiv.innerHTML = data.slice(start, end).join('<br>');
}

// 更新按钮状态
function updateButtonState() {
    nextPageButton.disabled = currentPage >= Math.ceil(data.length / pageSize) - 1;
}

// 初始化页面
function init() {
    displayPage(currentPage);
    updateButtonState();
}

// 下一页按钮点击事件
nextPageButton.addEventListener('click', () => {
    if (currentPage < Math.ceil(data.length / pageSize) - 1) {
        currentPage++;
        displayPage(currentPage);
        updateButtonState();
    }
});

// 初始化页面
init();