js原生分页

DOM

<div class="container">
      <ul class="content">
        <!-- <li><a href="">1</a></li>
            <li><a href="">1</a></li> -->
      </ul>
      <ul class="pagination">
        <!-- <li class="aroow-left">&lt;</li> -->
        <!-- <li class="num"><a href="javascript:;">1</a></li>
            <li class="num"><a href="javascript:;">2</a></li>
            <li class="num"><a href="javascript:;">3</a></li>
            <li class="num"><a href="javascript:;">4</a></li>
            <li class="num"><a href="javascript:;">.....</a></li>
            <li class="num"><a href="javascript:;">10</a></li>
            <li class="aroow-right">&gt;</li> -->
      </ul>
    </div>

style

• {
  margin: 0;
  padding: 0;
  }

  a {
  text-decoration: none;
  }

  ul,
  li {
  list-style-type: none;
  }

  .container {
  width: 500px;
  margin: 50px auto;
  }

  .content li {
  border: 1px solid #999;
  }

  .content li:first-child {
  border-bottom: none;
  }

  .pagination {
  display: flex;
  }

  script

 let date = [
        'HTML特殊字符编码大全',
        '往网页中输入特殊字符',
        '下面就是以字母或数字表示的特殊符号大全。',
        '4月25日0—24时,31个省(自治区、直辖市)和新疆生产建设兵团报告新增确诊病例1923例。',
        '境外输入现有确诊病例203例(无重症病例)',
        'aaa',
        '境外输入现有确诊病例203例(无重症病例)',
        '往网页中输入特殊字符',
        '下面就是以字母或数字表示的特殊符号大全。',
        '特殊字符编码大全',
        '输入特殊字符',
        'aaa',
        '4月25日0—24时,31个省(自治区、直辖市)和新疆生产建设兵团报告新增确诊病例1923例。',
        '境外输入现有确诊病例203例(无重症病例)',
        '4月25日0—24时,31个省(自治区、直辖市)和新疆生产建设兵团报告新增确诊病例1923例。',
        '境外输入现有确诊病例203例(无重症病例)',
        '往网页中输入特殊字符',
        '下面就是以字母或数字表示的特殊符号大全。',
        '122',
        'aaa',
      ]
      const size = 2, //每页显示的2条数据
        page = Math.ceil(date.length / size), //总共的页数，向上取整每页数据不足一条也显示一页
        pagerCount = 5 //每页数字个数
      const content = document.querySelector('.content')
      const pagination = document.querySelector('.pagination')
      let current = 1 //当前页数
      let strHash = window.location.hash
      if (strHash.includes('#')) {
        strHash = Number(strHash.substring(1))
        if (!isNaN(strHash)) {
          current = strHash
        }
      }
      // let beforePage = current - 1;//当前页数上一页
      // let afterPage = current + 1;//当前页数下一页

      /**内容显示*/
      let showContent = () => {
        // console.log("");
        //在每页都显示两条
        content.innerHTML = ''
        date.forEach((item, index) => {
          //取date当前页的数据，如当前页current=1，date下标index取0到2（2不包含）
          if (index >= (current - 1) * size && index < current * size) {
            //创建li装当前页两条数据
            const li = document.createElement('li')
            //添加符合条件的数据
            li.innerHTML = `<a href="">${item}</a>`

            //将li加入显区
            content.appendChild(li)
          }
        })
      }
      // showContent();
      // 创建分页列表
      let createPagination = () => {
        let beforePage = current - 1 //当前页数上一页
        let afterPage = current + 1 //当前页数下一页
        //左箭头
        let lis = `<li class="aroow-left">&lt;</li>`
        //page总页数小于pagerCount每页数字个数，就不需要省略号循环page个数字
        if (page <= pagerCount) {
          for (let i = 1; i < page; i++) {
            lis += `<li class="num"><a href="#${i}">${i}</a></li>`
          }
        } else {
          //当前页大一4显示左省略号和第一ye
          if (current >= pagerCount - 1) {
            lis += `<li class="num"><a href="#1">1</a></li>`
            lis += `<li class="aroow-left">....</li>`
          }
          /****/
          //current当前页在1到3，上页为1，下一页为4
          if (current >= 1 && current < pagerCount - 1) {
            beforePage = 1
            console.log('上一页', beforePage)
            afterPage = pagerCount - 1
            console.log('下一ye', afterPage)
          }
          //current当前页在8到10，上页为7，一页为10
          else if (current >= page - 2 && current <= page) {
            beforePage = page - (pagerCount - 2)

            afterPage = page
          }
          //遍历中间三个数
          for (let i = beforePage; i <= afterPage; i++) {
            lis += `<li class="num "><a href="#${i}">${i}</a></li>`
          }
          //curren小于7显示右省略号和最后页
          if (current <= page - (pagerCount - 2)) {
            lis += `<li class="aroow-left">....</li>`
            lis += `<li class="num"><a href="#${page}">${page}</a></li>`
          }
        }
        //右箭
        lis += `<li class="aroow-right">&gt;</li>`
        pagination.innerHTML = lis
        const pagNum = document.querySelectorAll('.num>a')
        pagNum.forEach((item) => {
          item.addEventListener('click', () => {
            current = parseInt(item.innerHTML)
            console.log('页码显示', current, item.innerHTML)
            createPagination()
          })
        })
        showContent()
      }
      createPagination()