本文将介绍如何使用 JavaScript 在 HTML 文件中实现一个“下一页”按钮，该按钮能够按照文件名（假设文件名是按日期升序排列的）的升序顺序跳转到下一个 HTML 文件。即使文件名不是连续的，也能正确跳转到下一个文件。我们将提供一个示例代码，帮助你理解和实现这个功能。
实现原理
核心思路是利用 JavaScript 获取当前页面的文件名，然后在一个预定义的数组中查找当前文件名，找到其索引。根据索引计算出下一个文件的索引，并最终获取下一个文件的文件名。如果当前页面是最后一个文件，则跳转到数组的第一个文件，实现循环跳转。
具体步骤
获取当前文件名: 使用 location.pathname 获取当前页面的完整路径，然后使用 split('/') 将路径分割成数组，最后使用 pop() 方法获取数组的最后一个元素，即文件名。
-
定义文件名数组: 创建一个包含所有 HTML 文件名的数组。这个数组需要按照文件名的升序排列。
立即学习“前端免费学习笔记（深入）”；
查找当前文件索引: 使用 indexOf() 方法在文件名数组中查找当前文件名的索引。
计算下一个文件索引: 将当前文件索引加 1，然后使用取模运算符 % 计算下一个文件的索引。这样可以确保当当前页面是最后一个文件时，下一个索引会回到 0，实现循环跳转。
获取下一个文件名: 使用计算出的索引从文件名数组中获取下一个文件名。
创建“下一页”链接: 创建一个 HTML 链接，将其 href 属性设置为下一个文件的文件名。
示例代码
<!DOCTYPE html>
<html>
<head>
<title>Next Page</title>
</head>
<body>
<h1>Current Page</h1>
<a id="nextPageLink" href="#">Next Page</a>
<script>
// 获取当前文件名
let currentFileName = location.pathname.split('/').pop();
// 文件名数组
let fileNames = [
'230512.html',
'230519.html',
'230530.html',
'230630.html',
'240120.html'
];
// 查找当前文件索引
let currentIndex = fileNames.indexOf(currentFileName);
// 计算下一个文件索引
let nextIndex = (currentIndex + 1) % fileNames.length;
// 获取下一个文件名
let nextFileName = fileNames[nextIndex];
// 设置“下一页”链接
let nextPageLink = document.getElementById('nextPageLink');
nextPageLink.href = nextFileName;
</script>
</body>
</html>代码解释:
- currentFileName = location.pathname.split('/').pop();：获取当前页面的文件名。
- fileNames = [...]：定义一个包含所有 HTML 文件名的数组。请确保这个数组按照文件名的升序排列。
- currentIndex = fileNames.indexOf(currentFileName);：找到当前文件名在数组中的索引。
- nextIndex = (currentIndex + 1) % fileNames.length;：计算下一个文件的索引，使用取模运算符确保循环跳转。
- nextFileName = fileNames[nextIndex];：获取下一个文件名。
- nextPageLink.href = nextFileName;：设置“下一页”链接的 href 属性，使其指向下一个文件。
注意事项
- 文件名数组: fileNames 数组必须按照文件名的升序排列，否则“下一页”按钮将无法正确跳转。
- 路径问题: location.pathname 获取的是包含路径的文件名。如果 HTML 文件不在根目录下，你需要根据实际情况调整 location.pathname.split('/').pop() 的代码，或者直接在 fileNames 数组中使用相对路径。
- 动态文件名: 如果文件名是动态生成的，你需要动态更新 fileNames 数组。
- 错误处理: 建议添加错误处理机制，例如当 currentFileName 不在 fileNames 数组中时，给出相应的提示。
总结
通过上述方法，我们可以轻松地在 HTML 文件中实现一个“下一页”按钮，该按钮能够按照文件名（假设文件名是按日期升序排列的）的升序顺序跳转到下一个 HTML 文件。这个方法简单易懂，适用于各种需要按顺序浏览 HTML 文件的场景。记住，关键在于维护一个正确的、按升序排列的文件名数组。
