第二十八周总结——分页

  关于分页，从大一到现在，除了用的layui，基本没写出来带省略号的分页，这次就准备花一晚上来搞一下它，准备写的时候感觉它好高大上，应该会很难写，但是，写的时候才发现，也挺简单。
html:

<div class="pageContainer">
        <button class="left">&lt;&lt;</button>
        <div class="pageVessels">
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
        </div>
        <button class="right">&gt;&gt;</button>
    </div>

css:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.w {
  width: 1000px;
  min-width: 1000px;
  max-width: 1100px;
  margin: 0 auto;
}
.pageContainer {
  width: 100%;
  height: 50px;
  background-color: skyblue;
}
.pageContainer .left {
  display: block;
  width: 60px;
  height: 30px;
  float: left;
}
.pageContainer .right {
  display: block;
  width: 60px;
  height: 30px;
  float: left;
}
.pageContainer .pageVessels {
  overflow: hidden;
  height: 30px;
  cursor: pointer;
  float: left;
}
.pageContainer .pageVessels .page {
  width: 60px;
  height: 30px;
  border: 1px solid #f5f5f5;
  text-align: center;
  line-height: 30px;
  margin: 0 10px;
  float: left;
  box-sizing: border-box;
  transition: all 0.3s;
}
.pageContainer .pageVessels .page:hover {
  background-color: #d6555f;
  color: #ffffff;
  border: 1px solid #d6555f !important;
}
.backColor {
  background-color: #d6555f;
  color: #ffffff;
  border: 1px solid #d6555f !important;
}
.none {
  display: none !important;
}

js:

let left=document.querySelector('.left')
let right=document.querySelector('.right')
let page=document.querySelectorAll('.page')
let key=1
let btnNumber=10
//生成按钮
let Btn=(i,h,btnNumber)=>{
    //判断左右按钮是否显示
    if(h==1)left.classList.add('none')
    else left.classList.remove('none')

    if(h==i)right.classList.add('none')
    else right.classList.remove('none')
    //判断如果按钮数小于10
    if(i<=btnNumber){
        for(let j=1;j<=i;j++){
            if(h==j){
                page[j-1].innerHTML=j
                page[j-1].classList.add("backColor")
            }else{
                page[j-1].innerHTML=j
                page[j-1].classList.remove("backColor")
            }
        }
    }
    //判断按钮数如果大于10，且小于6
    if(i>10&&h<6){
        for(let j=1;j<=btnNumber;j++){
            if(j==h){
                page[j-1].innerHTML=j==btnNumber-1?"...":j&&j==btnNumber?i:j
                page[j-1].classList.add("backColor")
            }else{
                page[j-1].innerHTML=j==btnNumber-1?"...":j&&j==btnNumber?i:j
                page[j-1].classList.remove("backColor")
            }
        }
    }
    //判断按钮数如果大于10，且大于6，且小于最大值-6
    if(i>btnNumber&&h>=6&&h<i-4){
        for(let j=1;j<=btnNumber;j++){
            if(h-(5-j)==h){
                page[j-1].innerHTML=(j==2||j==btnNumber-1)?"...":h-(5-j)&&j==btnNumber?i:h-(5-j)&&j==1?1:h-(5-j)
                page[j-1].classList.add("backColor")
            }else{
                page[j-1].innerHTML=(j==2||j==btnNumber-1)?"...":h-(5-j)&&j==btnNumber?i:h-(5-j)&&j==1?1:h-(5-j)
                page[j-1].classList.remove("backColor")
            }
        }
    }
    if(i>btnNumber&&h>=6&&h>=i-4){
        for(let j=1;j<=btnNumber;j++){
            if(i-(10-j)==h){
                page[j-1].innerHTML=(j==2?"...":i-(btnNumber-j)&&j==1?1:i-(btnNumber-j))
                page[j-1].classList.add("backColor")
            }else{
                page[j-1].innerHTML=(j==2?"...":i-(btnNumber-j)&&j==1?1:i-(btnNumber-j))
                page[j-1].classList.remove("backColor")
            }
        }
    }
}
let ans=30//一共多少页
Btn(ans,key,btnNumber)//默认第一页
for(let i=0,len=10;i<len;i++){
    page[i].addEventListener('click',function(){
        if(page[i].innerHTML!='...'){
            key=page[i].innerHTML
            Btn(ans,key,btnNumber)
        }
    })
}

//左
left.addEventListener('click',function(){
    key--
    Btn(ans,key,btnNumber)
})
//右
right.addEventListener('click',function(){
    key++
    Btn(ans,key,btnNumber)
})

效果是写出来了，还有优化的地方都后续再说吧。