标签： 分页
正文
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>分页器</title>
</head>
<style>
ul{
display: flex;
list-style: none;
}
#pageIndexS{
display: flex;
}
ul li{
width: 100px;
height: 50px;
display: inline-block;
line-height: 50px;
text-align: center;
border: 1px solid rgba(102, 100, 104, 0.32);
cursor: pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
</style>
<body>
<div>
<ul>
<li onclick="pageClick(0)">上一页</li>
<div id="pageIndexS"></div>
<li onclick="pageClick(1)">下一页</li>
</ul>
</div>
<script>
let all=10;//总页数
let page=1;//当前页
let daindex=[1,2,3,4,5];//默认显示页码区间
let m=document.getElementById('pageIndexS');//分页容器
function indexS(e) {
m.innerHTML='';//数据清除
for (let i in e){
m.innerHTML+=`<li class="ca${e[i]}" onclick="liClick(${e[i]})">${e[i]}</li>`;//添加节点
}
}
indexS(daindex);//调用分页
function pageClick(e) {
if(e==0){//上一页
if(page>1){
page--;
liClick(page)
}
}else {//下一页
if(page<all){
page++;
liClick(page)
}
}
}
function liClick(i) {//点击更新页码
page=i;//赋值当前页面
let j=0;//遍历索引
if(page<all){
if(i>2&&i<all-1){//在此区间选中页在数组下标2位置-也就是中间位置
while (j<5){
daindex[j]=Number(i)+j-2;//更新页码区间
j++
}
}else if(i==2){//页码=2时在数组下标1位置
while (j<5){
daindex[j]=Number(i)+j-1;
j++
}
}
}
indexS(daindex);//更新页码区间数据
let a=document.getElementsByClassName('ca'+i)[0];//选中页码展示状态更改
a.style.color="white";
a.style.background="#00796B"
}
</script>
</body>
</html>
image.png
网友评论