1. 页码的选择

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				/* background-color: palegoldenrod; */
			}
			.prev,.next,.page{
				width: 100px;
				height: 100px;
				border: 1px solid lightgray;
				color: #00BFFF;
				text-align: center;
				line-height: 100px;
				float: left;
				margin-right: 20px;
				/* 设置鼠标的样式 */
				cursor: pointer;
			}
			.select{
				border: 0;
				color: black;
			}
		</style>
	</head>
	<body>
		<!-- 
		 页码选择
			选中页 无边框 文字颜色为黑色
			未选中也 有灰色边框 文字颜色为蓝色
			
			选中的呈现一种状态
			没有选中的呈现另一种状态
				--- 选中的一个特殊的类
		 -->
		<div id="box">
			<div class="prev">上一页</div>
			<div class="page select">1</div>
			<div class="page">2</div>
			<div class="page">3</div>
			<div class="page">4</div>
			<div class="page">5</div>
			<div class="page">6</div>
			<div class="next">下一页</div>
		</div>
		
		<script>
			
			// 声明一个变量记录一下当前所在页
			var curPage = 1  // 假设当前页是在第一页
			
			// 获取一下所有的页码
			var page_nodes = document.querySelectorAll(".page")
			console.log(page_nodes)
			
			// 遍历页面节点集 为每个页码添加点击事件
			for(var i = 0; i < page_nodes.length; i++){
				// 给每个页面添加一个属性 标记是第几页
				page_nodes[i].setAttribute("index", i + 1)
				
				page_nodes[i].onclick = function(e){
					// 先将所有的设置成未选中状态
					unselect()
					
					// 点击的谁 再把谁设置成选中的状态
					console.log(this)  // this 表示的是点击的那个页码
					this.className = "page select"
					
					// 重新记录一下当前页码
					// 我能不能使用i进行操作
					//curPage = i + 1  //错误的  不能的
					//console.log(curPage)
					/*
					当该事件被执行的时候  循环早已执行完毕 i已经是循环的随后一个值
					*/
				   // 通过什么来记录当前页码呢？？？？
				   // 会给标签添加一个属性 这个属性值就可以代表页码值
				   curPage = parseInt(this.getAttribute("index"))
				   console.log(curPage)
				}
			}
			
			
			// 将所有页码设置成未选中的状态
			function unselect(){
				for(var i = 0; i < page_nodes.length; i++){
					// 此时没有选中的状态的页面
					page_nodes[i].className = "page"
				}
			}
			
			// 点击下一页执行的行为
			var next_page = document.querySelector(".next")
			next_page.onclick = function(e){
				curPage++ // 当前页码加1
				
				// 边界判断
				if(curPage > page_nodes.length){
					alert("已是最后一页")
					curPage = page_nodes.length
				}
				
				// 先把所有的设置成未选中状态
				unselect()
				
				// 把当前页码对应的这个标签设置为选中的状态
				page_nodes[curPage-1].className = "page select"
			}
			
			
			// 点击上一页
			var prev_page = document.querySelector(".prev")
			prev_page.onclick = function(e){
				curPage-- // 当前页码加1
				
				// 边界判断
				if(curPage < 1){
					alert("已经是第一页")
					curPage = 1
				}
				
				// 先把所有的设置成未选中状态
				unselect()
				
				// 把当前页码对应的这个标签设置为选中的状态
				page_nodes[curPage-1].className = "page select"
			}
			
		</script>
	</body>
</html>

     

更多推荐

HTML——JS—选择页码（案例）