自动上下页代码一html一网名张先生
实现 ./1.html 点击下一页后自动根据规律打开 ./1.html
代码解释:
- goToNextPage 函数:var currentPage = window.location.pathname.split('/').pop();:使用 window.location.pathname 获取当前页面的路径,然后使用 split('/') 方法将路径按照 / 分割为数组,再使用 pop() 方法获取数组的最后一个元素,也就是当前页面的文件名。var pageNumber = parseInt(currentPage.replace(/\D/g, ''));:使用 replace(/\D/g, '') 方法将文件名中的非数字字符替换为空字符串,然后使用 parseInt() 函数将结果转换为整数,得到当前页面的数字部分。var nextPageNumber = pageNumber + 1;:将当前页面的数字部分加 1,得到下一页的数字。var nextPage = './n' + nextPageNumber + '.html';:根据命名规律,将下一页的数字与 .html 后缀组合成下一页的文件名。window.location.href = nextPage;:将 window.location.href 设置为下一页的文件名,实现页面跳转。
- goToPreviousPage 函数:与 goToNextPage 函数类似,但将当前页面的数字部分减 1,得到上一页的数字,然后根据命名规律生成上一页的文件名,最后实现页面跳转。
使用说明:
- 将上述代码嵌入到你的 HTML 文件中,确保页面的命名规律符合代码中的假设(例如 n1.html、n2.html 等)。
- 当用户点击 "下一页" 按钮时,会调用 goToNextPage 函数跳转到下一页;当用户点击 "上一页" 按钮时,会调用 goToPreviousPage 函数跳转到上一页。
请注意,如果用户在第一页点击 "上一页" 按钮,或者在最后一页点击 "下一页" 按钮,可能会出现页面不存在的情况,你可以根据需要添加相应的边界检查逻辑,例如在 goToPreviousPage 函数中检查 previousPageNumber 是否小于 1,在 goToNextPage 函数中检查 nextPageNumber 是否超过最大页面数。