js 页码跳转框

在JavaScript中实现页码跳转框通常涉及到HTML、CSS和JavaScript的结合使用。下面我会解释基础概念，并提供一个简单的示例代码来实现这一功能。

基础概念

HTML: 用于创建网页的结构。
CSS: 用于美化网页的外观。
JavaScript: 用于实现网页的交互功能。

实现页码跳转框的优势

用户可以快速跳转到想要的页面，提高用户体验。
减少用户手动点击多次才能到达目标页面的情况。

类型

页码跳转框可以是简单的数字输入框加按钮的形式，也可以是下拉列表加按钮的形式。

应用场景

分页显示大量数据的网站或应用，如电商网站的商品列表、新闻网站的文章列表等。

示例代码

下面是一个简单的页码跳转框实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页码跳转框示例</title>
<style>
    .pagination {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }
    .pagination input {
        width: 50px;
        margin-right: 10px;
    }
    .pagination button {
        padding: 5px 10px;
    }
</style>
</head>
<body>

<div class="pagination">
    <input type="number" id="pageInput" min="1" value="1">
    <button onclick="goToPage()">跳转</button>
</div>

<script>
// 假设总共有10页
const totalPages = 10;

function goToPage() {
    const pageInput = document.getElementById('pageInput');
    let pageNumber = parseInt(pageInput.value);

    // 验证输入的页码是否合法
    if (isNaN(pageNumber) || pageNumber < 1 || pageNumber > totalPages) {
        alert('请输入有效的页码（1-' + totalPages + '）');
        return;
    }

    // 在这里执行跳转逻辑，例如通过修改URL的hash值或使用window.location进行跳转
    // 示例：修改URL的hash值
    window.location.hash = '#page' + pageNumber;

    // 示例：使用window.location进行跳转（会刷新页面）
    // window.location.href = 'your-page-url?page=' + pageNumber;
}

// 监听URL的hash变化，实现无刷新跳转（可选）
window.addEventListener('hashchange', function() {
    const hash = window.location.hash.substring(1); // 去掉'#'符号
    if (hash.startsWith('page')) {
        const pageNumber = parseInt(hash.substring(4));
        if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= totalPages) {
            // 更新页面内容为对应页码的内容（需要你自己实现）
            console.log('跳转到第' + pageNumber + '页');
        }
    }
});
</script>

</body>
</html>

解释

HTML部分：创建了一个输入框和一个按钮，用于输入页码和触发跳转。
CSS部分：简单美化了下页面布局。
JavaScript部分：
- goToPage函数用于处理跳转逻辑，首先验证输入的页码是否合法，然后执行跳转。
- 使用window.location.hash来改变URL的hash值，从而实现无刷新跳转（需要你自己根据hash值更新页面内容）。
- 监听hashchange事件，当URL的hash值变化时，执行相应的逻辑（例如更新页面内容）。