使用JavaScript实现分页

以下是使用JavaScript实现分页的代码示例：

HTML代码：

<div id="content">
  <p>第一页的内容</p>
  <p>第一页的内容</p>
  <p>第一页的内容</p>
  <p>第一页的内容</p>
  <p>第一页的内容</p>
  <p>第一页的内容</p>
  <p>第一页的内容</p>
  <p>第一页的内容</p>
  <p>第一页的内容</p>
  <p>第一页的内容</p>
  <p>第二页的内容</p>
  <p>第二页的内容</p>
  <p>第二页的内容</p>
  <p>第二页的内容</p>
  <p>第二页的内容</p>
  <p>第二页的内容</p>
  <p>第二页的内容</p>
  <p>第二页的内容</p>
  <p>第二页的内容</p>
  <p>第二页的内容</p>
  <p>第三页的内容</p>
  <p>第三页的内容</p>
  <p>第三页的内容</p>
  <p>第三页的内容</p>
  <p>第三页的内容</p>
  <p>第三页的内容</p>
  <p>第三页的内容</p>
  <p>第三页的内容</p>
  <p>第三页的内容</p>
  <p>第三页的内容</p>
</div>
<div id="pagination"></div>

JavaScript代码：

// 每页显示的数量
var pageSize = 10;
// 获取内容元素和分页元素
var content = document.getElementById("content");
var pagination = document.getElementById("pagination");
// 获取内容元素中所有的段落元素
var paragraphs = content.getElementsByTagName("p");
// 计算总页数
var pageCount = Math.ceil(paragraphs.length / pageSize);
// 创建页码按钮
for (var i = 1; i <= pageCount; i++) {
  var button = document.createElement("button");
  button.innerHTML = i;
  button.onclick = function() {
    // 计算当前页的起始索引和结束索引
    var startIndex = (parseInt(this.innerHTML) - 1) * pageSize;
    var endIndex = startIndex + pageSize;
    // 显示当前页的内容
    for (var j = 0; j < paragraphs.length; j++) {
      if (j >= startIndex && j < endIndex) {
        paragraphs[j].style.display = "block";
      } else {
        paragraphs[j].style.display = "none";
      }
    }
  };
  pagination.appendChild(button);
}
// 默认显示第一页
pagination.firstChild.click();

这段代码会将内容元素中的段落元素分成多页，每页显示10个段落。在页面底部创建页码按钮，点击按钮可以显示对应的页码内容。默认显示第一页的内容。