js对文章内容进行分页示例代码

下面我将为你详细讲解如何使用JavaScript对文章内容进行分页，包括示例代码和说明。

示例代码1：基本的分页功能

<!-- HTML结构 -->
<div id="article-container"></div> <!-- 存放文章内容的DIV -->
<div id="page-container"></div> <!-- 存放分页标签的DIV -->

<!-- JavaScript代码 -->
<script>
  var pageSize = 10; // 每页显示的文章数
  var pageIndex = 1; // 当前页码

  var articles = []; // 存放所有文章的数组，每个元素表示一个文章

  // 获取所有文章，将其存放在articles数组中
  function getAllArticles() {
    // 这里省略获取文章的代码，可以自行实现
    // 假设获取到了10篇文章
    articles = [
      { title: '文章1', content: '这是文章1的内容...' },
      { title: '文章2', content: '这是文章2的内容...' },
      // ... 省略7篇文章
    ];
  }

  // 根据pageIndex和pageSize获取当前页的文章
  function getCurrentPageArticles() {
    var startIndex = (pageIndex - 1) * pageSize; // 当前页码的起始下标
    var endIndex = startIndex + pageSize; // 当前页码的结束下标
    return articles.slice(startIndex, endIndex); // 返回当前页码的文章数组
  }

  // 将文章内容渲染到文章容器中
  function renderArticles() {
    var pageArticles = getCurrentPageArticles(); // 获取当前页的文章
    var htmlStr = ''; // 存放所有文章的HTML字符串
    for (var i = 0; i < pageArticles.length; i++) {
      var article = pageArticles[i];
      // 组装每个文章的HTML结构
      htmlStr += '<div>';
      htmlStr += '<h3>' + article.title + '</h3>';
      htmlStr += '<p>' + article.content + '</p>';
      htmlStr += '</div>';
    }
    // 将所有文章结构渲染到文章容器中
    document.getElementById('article-container').innerHTML = htmlStr;
  }

  // 渲染分页标签
  function renderPageTags() {
    var htmlStr = ''; // 存放所有分页标签的HTML字符串
    var totalPages = Math.ceil(articles.length / pageSize); // 所有页码的总数
    for (var i = 1; i <= totalPages; i++) {
      // 组装每个分页标签的HTML结构
      htmlStr += '<a href="javascript:void(0)" onclick="javascript:changePage(' + i + ')">' + i + '</a>';
    }
    // 将所有分页标签结构渲染到分页容器中
    document.getElementById('page-container').innerHTML = htmlStr;
  }

  // 切换页面
  function changePage(page) {
    pageIndex = page; // 更新当前页码
    renderArticles(); // 重新渲染文章
  }

  // 初始化操作
  getAllArticles(); // 获取所有文章
  renderArticles(); // 渲染第一页的文章
  renderPageTags(); // 渲染分页标签
</script>

以上代码除了获取文章的部分需要自己实现外，其他部分都是可以直接使用的。这个示例代码实现了基本的分页功能，通过 pageSize 和 pageIndex 变量控制每页显示的文章数和当前页码，使用 slice() 方法从 articles 数组中截取当前页的文章，然后通过 innerHTML 属性将文章渲染到页面上，再通过渲染分页标签实现页面切换。

示例代码2：支持翻页效果的分页功能

在示例代码1的基础上，我们可以进一步实现翻页效果的分页功能。下面是示例代码：

<!-- HTML结构 -->
<div id="article-container"></div> <!-- 存放文章内容的DIV -->
<div id="page-container">
  <a href="javascript:void(0)" onclick="javascript:goPrevPage()">&lt;</a>
  <span id="page-list"></span>
  <a href="javascript:void(0)" onclick="javascript:goNextPage()">&gt;</a>
</div> <!-- 存放分页标签的DIV -->

<!-- CSS样式 -->
<style>
  #article-container>div { /* 隐藏所有文章，只显示当前页的文章 */
    display: none;
  }
  #article-container>div.active {
    display: block;
  }
</style>

<!-- JavaScript代码 -->
<script>
  var pageSize = 1; // 每页显示的文章数
  var pageIndex = 1; // 当前页码
  var totalPage = 10; // 所有页码的总数

  // 渲染分页标签列表
  function renderPageList() {
    var htmlStr = ''; // 存放所有分页标签的HTML字符串
    for (var i = 1; i <= totalPage; i++) {
      htmlStr += '<a href="javascript:void(0)" onclick="javascript:goPage(' + i + ')">' + i + '</a>';
    }
    document.getElementById('page-list').innerHTML = htmlStr; // 渲染分页标签列表
    goPage(pageIndex); // 初始时显示第一页的文章
  }

  // 翻到上一页
  function goPrevPage() {
    pageIndex--;
    if (pageIndex < 1) {
      pageIndex = 1;
    }
    goPage(pageIndex);
  }

  // 翻到下一页
  function goNextPage() {
    pageIndex++;
    if (pageIndex > totalPage) {
      pageIndex = totalPage;
    }
    goPage(pageIndex);
  }

  // 跳转到指定页
  function goPage(page) {
    pageIndex = page;
    document.querySelectorAll('#article-container>div').forEach(function (item) {
      item.classList.remove('active'); // 隐藏所有文章
    });
    document.querySelector('#article-container>div:nth-of-type(' + pageIndex + ')').classList.add('active'); // 显示当前页的文章
  }

  // 初始化操作
  renderPageList(); // 渲染分页标签列表
</script>

以上代码在示例代码1的基础上进行了改进，主要是将渲染分页标签的逻辑从 renderPageTags() 函数中拆分出来，然后修改了分页标签的HTML结构，增加了两个“前一页”和“后一页”的分页标签。通过 classList 属性添加和删除所选元素的 class 属性，实现了翻页效果。