页面的分页效果

在这之前我们要知道我们需要什么
1.放置内容的容器
2.放置页数的容器
3.当前页面的页数(这个应该是最重要的)
4.算出一个可以渲染出多少页

HTML代码

<ul class="content">
</ul>
<ul class="page"></ul>

CSS代码

*{
      padding: 0;
      margin: 0;
    }
    .box{
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translate(-50%);
    }
    .content{
      list-style: none;
      background-color: #c9c9c9;
      width: 500px;
    }
    .content>li{
      width: 100%;
      height: 36px;
      box-sizing: border-box;
      padding-top: 12px;
      border-bottom:1px solid #999999;
      /* line-height: 36px; */
      
    }
    .btn{
     margin-top: 20px;
     width: 100px;
     height: 50px;
     outline: none;
     position: relative;
     left: 50%;
     transform: translate(-50%);
   }
   .page>li{
     list-style: none;
     border: 1px solid black;
     padding: 5px 10px;
     font-size: 12px;
     color: rgb(41, 41, 170);
     float: left;
   }
   .ellipsis{
     border: none !important;
   }

下面是JS部分

	//假数据部分
	var date = [
        "yyyyyyyyyyyyyyyyyyyyyyyyyyyyy",
        "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "wwwwwwwwwwwwwwwwwwwwwwwwwwwww",
        "vvvvvvvvvvvvvvvvvvvvvvv",
        "uuuuuuuuuuuuuuuuuuuuuuuuuuuu",
        "tttttttttttttttttttt",
        "sssssssssssssssssssssssssssss",
        "rrrrrrrrrrrrrrrrrrrrrrrrrrr",
        "qqqqqqqqqqqqqqqqqqqq",
        "ppppppppppppppppppppppppppp",
        "ooooooooooooooooooo",
        "nnnnnnnnnnnnnnnnnnnnnnn",
        "mmmmmmmmmmmmmmmmm",
        "llllllllllllll",
        "kkkkkkkkkkkkkkkk",
        "ggggggggggggggggggggg",
        "iiiiiiiiiiiiiiiiiiiiiii",
        "hhhhhhhhhhhhhhhhhhhhhhhhhhh",
        "jjjjjjjjjjjjjjjjjjjjj",
        "ffffffffffffffffffffff",
        "eeeeeeeeeeeeeeeeeeeeeeeeeeeee",
        "ddddddddddddddddddddd",
        "cccccccccccccccccccccc",
        "bbbbbbbbbbbbbbbbbbbbbbbbb",
        "aaaaaaaaaaaaaaaaaaaaa",
        "zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz",
      ];
      //获取内容容器
      var ulo = document.querySelector(".content")
      //获取页码容器
      var pul = document.querySelector(".page")
      //初始化页面为第一页
      var current = 1
      //算出一个可以渲染多少页
      var wholePage = Math.ceil(date.length/2)
      //初始化渲染页面内容
      gjLi(current)
      //初始化构建页面页数
      structureLi(current)
      function structureLi(num) {
        //每次渲染页面的时候先删除ul里面的内容
          pul.innerHTML = ""
          //首页按钮
          var homePage = document.createElement("li")
          //首页点击事件通过改变current的值来重新渲染页面
          homePage.addEventListener("click", function () {
            current = 1
            structureLi(current)
            gjLi(current)
          })
          homePage.innerHTML = "首页"
          //上一页
          var beforePage = document.createElement("li")
          beforePage.addEventListener("click", function () {
            current++
            if (current < 1) {
              return
            }
            structureLi(current)
            gjLi(current)
          })
          beforePage.innerHTML = "上一页"
          //添加首页和上一页两个元素
          pul.appendChild(homePage)
          pul.appendChild(beforePage)
          //这是是判断中间页数的显示逻辑
          if (num < 4) {
            //在前4个页面选择是要渲染出三个li 当前 后一个 还有下一个省略号
            for (let i = 1; i <= num + 2; i++) {
              //这是如果渲染...
              if (i == num + 2) {
                var li = document.createElement("li")
                li.classList.add("ellipsis")
                li.innerHTML = "..."
                pul.appendChild(li)
              } else {
                var li = document.createElement("li")
                li.innerHTML = i
                li.addEventListener("click", function () {
                  // console.log("123");
                  current = i
                  structureLi(current)
                  gjLi(current)
                })
                pul.appendChild(li)
              }
            }
          } else if (num >= 4 && num < wholePage - 2) {
            //这里是中间的逻辑 要渲染7个
            //固定渲染第一页和最后一页
            //两边渲染两个...
            //中间渲染 前一页  当前页  后一页
            var beforeLi = document.createElement("li")
            beforeLi.innerHTML = 1
            pul.appendChild(beforeLi)
            if (num - 2 != 0 && num + 2 != wholePage) {
              for (let i = num - 2; i <= num + 2; i++) {
                // console.log(i);
                if (i == num - 2 || i == num + 2) {
                  var li = document.createElement("li")
                  li.classList.add("ellipsis")
                  li.innerHTML = "..."
                  pul.appendChild(li)
                } else {
                  var li = document.createElement("li")
                  li.innerHTML = i
                  li.addEventListener("click", function () {
                    // console.log("456");
                    current = i
                    console.log(current);
                    structureLi(current)
                    gjLi(current)
                  })
                  pul.appendChild(li)
                }
              }
            }
            //这里是固定渲染的最后一页
            var afterLi = document.createElement("li")
            afterLi.innerHTML = wholePage
            pul.appendChild(afterLi)
          } else if (num >= wholePage - 2) {
            //这里是当当前页是离最后一页的前两页时就不能渲染后面的省略号的
            console.log("123");
            var beforeLi = document.createElement("li")
            beforeLi.innerHTML = 1
            pul.appendChild(beforeLi)
            for (let i = wholePage - 4; i <= wholePage; i++) {
              if (i == wholePage - 4) {
                var li = document.createElement("li")
                li.classList.add("ellipsis")
                li.innerHTML = "..."
                pul.appendChild(li)
              } else {
                var li = document.createElement("li")
                li.innerHTML = i
                li.addEventListener("click", function () {
                  console.log("456");
                  current = i
                  console.log(current);
                  structureLi(current)
                  gjLi(current)
                })
                pul.appendChild(li)
              }
            }
          }
          //这里是固定渲染的下一页
          var afterPage = document.createElement("li")
          afterPage.addEventListener("click", function () {
            current++
            if (current > wholePage) {
              return
            }
            structureLi(current)
            gjLi(current)
          })
          afterPage.innerHTML = "下一页"
          //这里是固定渲染的尾页
          var endPage = document.createElement("li")
          endPage.addEventListener("click", function () {
            current = wholePage
            structureLi(current)
            gjLi(current)
          })
          endPage.innerHTML = "尾页"
          pul.appendChild(afterPage)
          pul.appendChild(endPage)
        }
      
      //这里是通过current来改变页面内容
      function gjLi(num) {
        ulo.innerHTML = ""
        for (let i = 2*(num-1); i < 2*num; i++) {
          console.log(i);
          var li = document.createElement("li")
          if (date[i] == undefined) {
            li.innerHTML = ""
          }else{
            li.innerHTML = date[i]
          }
          ulo.appendChild(li)
        }
      }