静态网页分页只能前端模拟，需预载全部数据并用JavaScript控制DOM显隐；核心是按页大小切分数组、动态渲染页面内容及页码按钮，并做好输入校验与性能优化。
静态网页没法用后端分页，只能靠前端模拟
HTML5 静态网页没有服务器支持，fetch 无法读取数据库或动态接口，所以所谓“分页”本质是把全部数据一次性加载进页面，再用 JavaScript 控制显隐。页码跳转不是请求新 URL，而是切换 DOM 节点的 display 状态。
用 JavaScript 手动切数据块 + 生成页码按钮
核心思路：把内容数组按每页条数（如 pageSize = 10）拆成二维数组，每次只显示当前页对应的数据片段；页码按钮绑定 onclick，触发重绘函数。
- 数据必须预先存在 JS 变量里（比如硬编码在
<script>中，或从 JSON 文件同步加载） - 页码按钮不要用
<a href="#p2">这类伪跳转——它不触发逻辑，只滚动，且无法响应点击事件 -
Math.ceil(data.length / pageSize)是算总页数的唯一可靠方式，别用data.length % pageSize判断
const data = ["条目1", "条目2", "条目3", /* ... 共127项 */];
const pageSize = 10;
let currentPage = 1;
<p>function renderPage(page) {
const start = (page - 1) * pageSize;
const end = start + pageSize;
const pageData = data.slice(start, end);
document.getElementById("list").innerHTML = pageData.map(i => <code><div>${i}</div></code>).join("");
document.querySelectorAll(".page-btn").forEach(btn => btn.classList.toggle("active", Number(btn.dataset.page) === page));
}</p><p>function initPagination() {
const totalPages = Math.ceil(data.length / pageSize);
const pager = document.getElementById("pager");
pager.innerHTML = Array.from({ length: totalPages }, (_, i) => i + 1)
.map(num => <code><button class="page-btn" data-page="${num}" onclick="renderPage(${num})">${num}</button></code>)
.join("");
renderPage(1);
}输入框跳转页码要防错和边界检查
用户手动输页码时，常见问题包括：输字母、负数、超范围数字、空格。不校验会导致 slice(-10, 0) 返回空数组，或 renderPage(999) 渲染空白页却无提示。
- 用
parseInt(input.value, 10)转整数，NaN就重置为 1 - 跳转前强制约束：
page = Math.max(1, Math.min(page, totalPages)) - 输完按回车才触发，比实时监听
input更轻量、更可控
document.getElementById("goPage").addEventListener("keypress", e => {
if (e.key === "Enter") {
const input = document.getElementById("pageInput");
let page = parseInt(input.value.trim(), 10);
if (isNaN(page)) page = 1;
page = Math.max(1, Math.min(page, totalPages));
renderPage(page);
input.value = page; // 同步显示合法值
}
});性能和体验细节容易被忽略
127 条数据没问题，但若内容含图片、复杂 HTML 或上千条文本，首次加载会卡顿；页码过多（比如 200 页）直接生成 200 个 <button> 也会拖慢渲染。
立即学习“前端免费学习笔记（深入）”；
- 页码栏要做截断：只显示当前页 ±2 页，首尾固定，中间用
<span>…</span>，避免 DOM 泛滥 - 所有列表项建议用
document.createDocumentFragment()批量插入，而非反复innerHTML += - 移动端需加
touchstart事件兼容，iOS Safari 对onclick在<button>上有时不敏感
真要支撑万级数据，静态页就不是合适载体了——该上静态站点生成器（如 Hugo）预渲染分页 HTML，或改用轻量 API + 前端分页库（如 simple-pagination.js），而不是硬扛。
