分页 js

纯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>```