纯js分页
首页
1
2
3
4
5
6
7
8
9
10
下一页
末页
代码实现
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
<style>
.news-pages{
padding:20px 0 140px 0;
}
.news-page{
22px;
height:22px;
border:1px solid #d5d5d5;
border-radius: 4px;
display:inline-block;
text-align: center;
line-height: 22px;
font-size: 12px;
color:#afafaf;
}
.page-first,.page-last{
40px;
}
.page-next{
50px;
}
.page-one{
background: #a9752f;
color:#fff;
}
</style>
</head>
<body>
<div class="news-pages">
<span class="news-page page-first">首页</span>
<span class="news-page page-one">1</span>
<span class="news-page">2</span>
<span class="news-page">3</span>
<span class="news-page">4</span>
<span class="news-page">5</span>
<span class="news-page">6</span>
<span class="news-page">7</span>
<span class="news-page">8</span>
<span class="news-page">9</span>
<span class="news-page">10</span>
<span class="news-page page-next">下一页</span>
<span class="news-page page-last">末页</span>
</div>
</body>
<script>
//兼容microsoft eage 写法
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
var pages = document.querySelectorAll('.news-page');
var first = document.querySelector('.page-one');
var next = document.querySelector('.page-next');
var last = document.querySelector('.page-last');
var num;
for(var i= 0;i<pages.length;i++){
pages[i].index = i;
pages[i].onclick = function(){
for( page of pages){
page.style.background = '#fff';
page.style.color = '#afafaf';
}
// 首页点击
if(this.index == 0){
this.style.background = '#fff';
this.style.color = '#afafaf';
first.style.background = '#a9752f';
first.style.color ="#fff";
num=1;
// 最后一页
}else if(this.index == pages.length-1){
this.style.background = '#fff';
this.style.color = '#afafaf';
pages[pages.length-3].style.background = '#a9752f';
pages[pages.length-3].style.color = '#fff';
num=10;
// 下一页
}else if(this.index ==pages.length-2){
this.style.background = '#fff';
this.style.color = '#afafaf';
if(num){
num+=1
if(num<11){
pages[num].style.background = '#a9752f';
pages[num].style.color = '#fff';
}else{
pages[pages.length-3].style.background = '#a9752f';
pages[pages.length-3].style.color = '#fff';
num =pages.length-3;
}
}else{
pages[2].style.background = '#a9752f';
pages[2].style.color = '#fff';
num=2
}
}else{
num = Number(this.innerHTML);
this.style.background = '#a9752f';
this.style.color ="#fff";
}
console.log(num)
}
}
</script>
</html>```