JS实现html列表分页功能

html代码

<div class="page-block">
    <div class="page page-1">
      <ul>
        <li class="article-hover">
          <div class="info-content">
            <a href="1.html" target="mainIframe">第一页文章</a>
            <span class="Date">2022-10-08</span>
          </div>
        </li>
        <hr/>
        <li class="article-hover">
          <div class="info-content">
            <a href="1.html" target="mainIframe">第一页文章</a>
            <span >2022-10-08</span>
          </div>
        </li>
      </ul>
    </div>

    <div class="page-block">
      <div class="page page-3">
        <ul>
          <li class="article-hover">
            <div class="info-content">
              <a href="1.html" target="mainIframe">第一页文章</a>
              <span class="Date">2022-10-08</span>
            </div>
          </li>
          <hr/>
          <li class="article-hover">
            <div class="info-content">
              <a href="1.html" target="mainIframe">第一页文章</a>
              <span >2022-10-08</span>
            </div>
          </li>
        </ul>
      </div>
  </div>


<!-- 分页按钮 -->
<!--增加页数时，需要修改articlePage.js里的第2行-->
<div class="page-icon">
  <button class="firstPage" onclick="first_click()" >第一页</button>
  <button class="beforePage" onclick="prev_click()" ><</button>
  <button>第<input id="currentPage" onchange="choose_page()" type="text" value="1"/>页</button>
  <button>/&nbsp;&nbsp;&nbsp;共<input id="totalPage" type="button"  value="" readonly="readonly">页</button>
  <button class="nextPage" onclick="next_click()">></button>
  <button class="lastPage" onclick="last_click()">最后页</button>			
</div>

js：

 //计算总页数
	var totalPage=document.getElementById("totalPage")
	window.onload=function(){ 
	 var pageTotalNumber=document.getElementsByClassName("page").length
	 totalPage.value=pageTotalNumber;
	 } 
	 
// 定义一个数组，保存当前所有页面的class name, 形成page_index=["page-1","page-2",......]
var page_index=new Array();
for(var i=1;i<=document.getElementsByClassName("page").length;i++){
	page_index.push("page-"+i);
}

// 输入pagename，打开指定的div，隐藏其他的div
function page_option(pagename){
	var tar_index = page_index.indexOf(pagename);
	page_index.slice(tar_index, 1);
	for (var j = 0; j < page_index.length ; j++){
		var close_div = document.getElementsByClassName(page_index[j]);
		for (var i = 0; i<close_div.length;i++) {
			   close_div[i].style.display="none";
		};
	}
	var opendiv = document.getElementsByClassName(pagename);
	for (var i = 0; i<opendiv.length;i++) {
		   opendiv[i].style.display="block";
	};
}

// 点击 返回第一页按钮 执行的操作
function first_click(){
	page_option("page-1");
	document.getElementById('currentPage').value=1;
}

// 点击 跳到最后一页按钮 执行的操作
function last_click(){
	var total_page = document.getElementById('totalPage').value;
	page_option(page_index[page_index.length - 1]);
	document.getElementById('currentPage').value=total_page;
}

// 点击 上一页按钮 执行的操作
function prev_click(){
	var cur_page = document.getElementById('currentPage').value;
	if (cur_page > 1){
		document.getElementById('currentPage').value=parseInt(cur_page)-1;
		var pagename = page_index[parseInt(cur_page)-2];
		page_option(pagename);
	}
}

// 点击 下一页按钮 执行的操作
function next_click(){
	var cur_page = document.getElementById('currentPage').value;
	var total_page = document.getElementById('totalPage').value;
	if (cur_page < total_page){
		document.getElementById('currentPage').value=parseInt(cur_page) + 1;
		var pagename = page_index[parseInt(cur_page)];
		page_option(pagename);
	}
}

// 手动改变当前页码时执行的操作
function choose_page(){
	var cur_page = document.getElementById('currentPage').value;
	var pagename = page_index[parseInt(cur_page)-1];
	page_option(pagename);
}