关于分页,从大一到现在,除了用的layui,基本没写出来带省略号的分页,这次就准备花一晚上来搞一下它,准备写的时候感觉它好高大上,应该会很难写,但是,写的时候才发现,也挺简单。
html:
<div class="pageContainer">
<button class="left"><<</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">>></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)
})
效果是写出来了,还有优化的地方都后续再说吧。