js实现web分页

最新推荐文章于 2024-09-22 11:17:00 发布

菜鸟猪猪侠yy

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量617

点赞数 3

分类专栏： JS 个人demo 文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_41743601/article/details/118021673

版权

JS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

个人demo

6 篇文章 0 订阅

订阅专栏

web分页的实现

html+css+js，代码如下：

<!DOCTYPE html>
<html>

<!--之前：点击下一页：老是出现下一页移至第二行，是因为page的长度不够，因为，每个小方块的数字由单个变为双个，数字被撑大，所以如此-->
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.11.0.js" type="text/javascript"></script>
		<style type="text/css">
			#page {
				height: 6%;
				width: 55%;
				background-color: gainsboro;
				position: absolute;
				left: 21%;
				top: 40%;
				/*overflow: hidden;*/
			}
			
			#page a {
				background-color: white;
				text-decoration: none;
				padding: 4px 10px 1px;
				margin-left: 10px;
				margin-top: 5px;
				display: inline-block;
				border-radius: 3px;
			}
			
			#page a:hover {
				background-color: greenyellow;
			}
			
			a:visited {
				color: black;
			}
		</style>
	</head>

	<body>
		<div id="page">

			<!--如果href属性为空：则会出现点击图标，出现要打印的苏剧一闪而过的问题-->
			<a href="#">上一页</a>
			<a href="#">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#">6</a>
			<a href="#">7</a>
			<a href="#">8</a>
			<a href="#">9</a>
			<a href="#">10</a>
			<a href="#">下一页</a>
		</div>
		<script type="text/javascript">
			function $(exp) { //获取元素  #box
				var el;

				//对exp匹配以#开头的字符串，且匹配数字、字母、下划线、且以+结尾的字符串，如果存在该匹配，则返回true
				if(/^#\w+$/.test(exp)) {
					el = document.querySelector(exp);
				} else {
					el = document.querySelectorAll(exp);
				}
				return el;
			}

			//			var page=document.getElementById("#page");
			var page = $("#page");

			//定义一个全局变量count，用于计数
			var count=0;
			
				
			page.onclick = function(ev) {
				//利用事件冒泡的原理，把事件添加给父级box
				//	var oEvent = ev || event; //意思是 ev 成立时 oEvent = event，否则 oEvent = ev
				//设置最大页大数量
				var page_maxsize = 20;
				var e = ev || event;
				//打印事件
				console.log("即将打印数据");
				console.log(e);
				var target = e.target || e.srcElement; //获取当前点击对象
				
				
				
				
				//在点击页码之前获取id=page的div下的所有标签名为a的元素
				var a_tag = document.getElementById("page").getElementsByTagName("a");

				//如果点击的不是上一页和下一页，则为当前页
				var page_Num = target.innerHTML;
				//用于存储第一个target到数组，让后面的target与此相比较，注意：数组当中有且只有一个数组
				mytarget(target);
				if(page_Num>=1 && page_Num<=page_maxsize && page_Num != "上一页" && page_Num != "下一页"){										
					target.style.backgroundColor="pink";					
					//判断当前的target和上一次的target是否相同					
					if(count>0 && target.innerHTML!=arr[0].innerHTML){
						//如果不相等，则将当前的target存入数组，替换原先的元素,且将原先的元素的背景色还原为白色	
						arr[0].style.backgroundColor="white";
						arr[0]=target;
						target.style.backgroundColor="pink";							
					}
					count++;
					
					if(page_Num>6 && page_Num<=(page_maxsize-4) && page_Num != "上一页" && page_Num != "下一页") {
					for(i = 1; i <= 10; i++) {						
						a_tag[i].innerHTML = i + (page_Num - 6);
					}
					
				}
				}
				
				
				

				//对上一页和下一页进行隐藏或显示的判断		
				if(page_Num == 1) {
					a_tag[0].style.display = "none";
				} else {
					//注意：这里要设置为inline，如果设置为block会乱
					a_tag[0].style.display = "inline";
				}
				//如果当前页为最后一页
				if(page_Num == page_maxsize) {
					a_tag[11].style.display = "none";
				} else {
					//注意：这里要设置为inline，如果设置为block会乱
					a_tag[11].style.display = "inline";
				}


				//对上一页和下一页的点击进行处理
				if(page_Num == "上一页" || page_Num == "下一页") {
					//对最新的每个小方块的页码进行更新
					var a_tag_2 = document.getElementById("page").getElementsByTagName("a");
					if(page_Num == "上一页") {
						var i;
						for(i = 1; i <= 10; i++) {
							if(a_tag_2[10].innerHTML > 10)
								a_tag_2[i].innerHTML -= 1;
						}
					}
					if(page_Num == "下一页") {
						//对最新的每个小方块的页码进行更新
						var a_tag_3 = document.getElementById("page").getElementsByTagName("a");
						var i;
						for(i = 1; i <= 10; i++) {
//						    console.log(a_tag_3[i].innerHTML+" ");
							if(a_tag_3[10].innerHTML < page_maxsize){
								//a_tag_3[i].innerHTML:得到的值为字符串，所以会出现："1"+1=11而不是=2
//								parseInt():可以将字符串转换为数字
								a_tag_3[i].innerHTML=parseInt(a_tag_3[i].innerHTML)+1;
								console.log(a_tag_3[i].innerHTML);
							}
								
						}
					}

				}
			}
		</script>
		<script>
			//创建一个函数，用于对初始target进行存储
			var arr=[];	
			function mytarget(target){
				if(count==0){														
				arr[0]=target;				
				}
			}
		</script>
	</body>

</html>