javascript中div元素的分页

// HTML
<div id="content"></div>
<div id="pagination"></div>

// JavaScript
const contentDiv = document.getElementById('content');
const paginationDiv = document.getElementById('pagination');

const itemsPerPage = 10; // 每页显示的内容数量
const totalItems = 100; // 总内容数量
const totalPages = Math.ceil(totalItems / itemsPerPage); // 总页数

function paginate(page) {
  const startIndex = (page - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  
  // 生成要显示的内容的HTML代码
  let html = '';
  for (let i = startIndex; i < endIndex; i++) {
    html += `<p>Content ${i + 1}</p>`;
  }
  
  // 更新内容
  contentDiv.innerHTML = html;
  
  // 生成分页导航栏的HTML代码
  let paginationHtml = '';
  if (page > 1) {
    paginationHtml += `<button onclick="paginate(${page - 1})">上一页</button>`;
  }
  for (let i = 1; i <= totalPages; i++) {
    paginationHtml += `<button onclick="paginate(${i})">${i}</button>`;
  }
  if (page < totalPages) {
    paginationHtml += `<button onclick="paginate(${page + 1})">下一页</button>`;
  }
  
  // 更新分页导航栏
  paginationDiv.innerHTML = paginationHtml;
}

// 初始化，默认显示第一页
paginate(1);