简单的js分页脚本

JavaScript分页脚本是网页开发中常见的功能，用于在大量数据列表中实现高效的导航。这里提供的脚本展示了如何使用纯JavaScript实现一个简单的分页功能，适用于小型项目或学习用途。以下将详细介绍脚本中的关键知识点： 1. **URL参数获取**： `getUrlParam(name)` 函数用于从URL中提取指定参数（这里是`index`）的值。它创建了一个正则表达式匹配URL中的查询字符串，然后使用`window.location.search`获取URL的查询部分，并通过`match()`方法找到匹配的参数值。如果找到匹配项，它会返回解码后的整数值；否则返回0。 2. **页面加载时初始化分页**： `onload`事件在页面加载完成后触发。`funcLoad()`函数在这里被调用，它首先定义了总页数`num`（在这个例子中为100），然后尝试从URL中获取当前页`index`。如果没有`index`参数，则设置为总页数。接着调用`showpage(url, num, index)`来显示分页链接。 3. **`showpage`函数**： 这个函数负责构建分页链接的HTML。它接收三个参数：URL、总页数和当前页数。它计算出“上一页”和“下一页”的链接，以及要在分页栏中显示的页码范围。如果当前页数小于10，而总页数大于10，那么会显示更多的前页链接。它将生成的HTML插入到ID为`"pagenumber"`的元素中。 4. **颜色标记当前页**： 当循环遍历页码时，如果当前页码与循环变量相等，页码将以红色显示，其他页码则作为链接显示。 5. **导航链接**： `showpage`函数中构建的HTML包括“上一页”和“下一页”链接，以及一个输入框和按钮，用户可以输入页码并点击“go”按钮跳转。 6. **“go”按钮点击事件**： `funcGo()`函数处理“go”按钮的点击事件。它首先检查输入框中的值是否为有效的页码（大于0且不大于总页数），如果是，则更新URL并重定向到新页；否则，弹出警告消息。 7. **DOM操作**： 脚本中频繁地使用`getElementById`来获取DOM元素，然后通过`innerHTML`属性来修改元素内容，这是JavaScript中常见的DOM操作方式。 8. **变量声明**： 在JavaScript中，变量声明使用`var`关键字。在这个脚本中，所有变量都在函数内部声明，这意味着它们的作用域仅限于该函数。 这个简单的JavaScript分页脚本提供了一个基础的分页解决方案，但不包含一些更高级的功能，如动态加载内容、缓存页面、用户交互优化等。在实际项目中，你可能需要考虑使用更复杂的方法，例如jQuery插件或现代前端框架（如React、Vue.js或Angular）提供的分页组件。