javascript 支持页码格式的分页类

针对“javascript 支持页码格式的分页类”的完整攻略，我们需要经历以下步骤：

第一步：编写分页类所需要的HTML结构

首先，我们需要在页面中确定每个相关分页标签所对应的HTML结构和样式，示例如下：

<div class="pagination-wrapper">
  <ul class="pagination">
    <li class="prev disabled"><a href="#">上一页</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">下一页</a></li>
  </ul>
</div>

第二步：编写分页类所需要的JavaScript代码

接下来，我们需要编写JavaScript代码来实现分页功能，示例代码如下：

class Pagination {
  constructor(wrapper, pages, currentPage) {
    this.wrapper = wrapper;
    this.pages = pages;
    this.currentPage = currentPage;
    this.createPagination();
  }

  createPagination() {
    const pagination = document.createElement('ul');
    pagination.classList.add('pagination');
    for (let i = 1; i <= this.pages; i++) {
      const li = document.createElement('li');
      const a = document.createElement('a');
      a.href = '#';
      a.innerText = i;
      li.appendChild(a);
      if (i === this.currentPage) {
        li.classList.add('active');
      }
      pagination.append(li);
    }
    this.wrapper.append(pagination);
    this.addPaginationClickListener();
  }

  addPaginationClickListener() {
    const links = this.wrapper.querySelectorAll('.pagination li a');
    for (let i = 0; i < links.length; i++) {
      const link = links[i];
      link.addEventListener('click', (event) => {
        event.preventDefault();
        this.currentPage = parseInt(event.target.innerText);
        const lis = this.wrapper.querySelectorAll('.pagination li');
        for (let j = 0; j < lis.length; j++) {
          const li = lis[j];
          li.classList.remove('active');
        }
        const activeLi = lis[this.currentPage - 1];
        activeLi.classList.add('active');
      });
    }
  }
}

const wrapper = document.querySelector('.pagination-wrapper');
const pages = 10;
const currentPage = 1;

new Pagination(wrapper, pages, currentPage);

第三步：使用分页类

最后，我们需要在相关页面中使用已经编写好的分页类代码，示例代码如下：

<div class="pagination-wrapper"></div>
<script src="pagination.js"></script>
<script>
  const wrapper = document.querySelector('.pagination-wrapper');
  const pages = 10;
  const currentPage = 1;
  new Pagination(wrapper, pages, currentPage);
</script>

以上就是JavaScript支持页码格式的分页类的完整攻略，希望可以帮助您完成自己的分页功能。如果需要更详细的讲解或者实际的代码示例，可以随时联系我，我很乐意帮助您。