js实现翻页

效果图：
代码：
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<style>
			.first{
				color:#666;
				display:inline-block;
				vertical-align:top;
				border:1px solid #e6e6e6;
				padding:5px 9px;
				font-size:12px;
			}
			#number{
				display:inline-block;
				vertical-align:top;
			}
			.num{
				color:#666;
				display:inline-block;
				vertical-align:top;
				border:1px solid #e6e6e6;
				padding:5px 9px;
				font-size:12px;
				margin-right:6px;
			}
			.current{
				color:#3e89fa;
				font-size:12px;
				display:inline-block;
				vertical-align:top;
				margin-left:30px;
				padding:5px 9px;
			}
			#inp{
				height:32px;
				width:32px;
			}
			.jump{
				display:inline-block;
				vertical-align:top;
				font-size:12px;
			}
			.l_jump{
				display:inline-block;
				vertical-align:top;
				padding:5px 9px;
				border:1px solid #e6e6e6;
			}
		</style>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<div class="first" id="home">首页</div>
			<div class="first" id="before">上一页</div>
			<div id="number">
				
			</div>
			<div class="first" id="next">下一页</div>
			<div class="first" id="last">尾页</div>
			<div class="current"></div>
			<div class="jump">
				<input type="text" id="inp"></input>
				<div class="l_jump">跳转</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var sign=1;//记录当前第几个块，比如我规定最多显示10个块，那么sign的取值范围就是1-10
		var b_sign=1;//记录sign变动之前的sign数值
		var count=20;//记录总共页数
		var real_count=count<=10?count:10;//定义最多有多少块
		var real_change=0;
		var o=0;
		if(real_count%2==0)
		{
			real_change=real_count/2;
		}
		else 
		{
			real_change=real_count/2+0.5;
			var o=1;
		}
		//初始化块
		let i=1;
		while(i<=real_count)
		{
			var val="<div class='num' id="+i+">"+i+"</div>";
			$("#number").append(val)
			i++;
		}
		
		function query_all(){//查找id='number'块的所有子节点
			nodes=$("#number").find("div");
			length=nodes.length;
		}
		query_all();
		
		function currentPage(){//获取当前page
			let use="#"+sign;
			$(".current").text("当前"+$(use).text()+"/"+count+"页");
		}		
		currentPage();
		
		var b_change=function(){//将当前第sign块样式还原
			b_sign=sign;
			let use="#"+b_sign;
			$(use).css({"border":"1px solid #e6e6e6","color":"#666"});
		}
		var blue_change=function(c){//将当前sign块样式改变，好区别于其他块
			let use="#"+c;
			$(use).css({"border":"none","color":"#3e89fa"});
		}
		blue_change(sign);//页面第一次加载的时候，改变指定块样式

		function go_back(now_sign,kit){//当前sign块先还原样式,再改变sign,再改变改变后的sign块样式
			b_change();
			if(kit==0)
			{
				sign=now_sign;
			}
			else if(kit==1)
			{
				if(sign!=real_count)
				sign++;
			}
			else if(kit==2)
			{
				if(sign!=1)
				sign--;
			}
			blue_change(sign);
		}
		function change_add(c_add,kit){//遍历改变id='number'的子节点内容
			let p=c_add;
			for(let j=0;j<length;j++)
			{
				if(kit==0){
					nodes[j].innerHTML=p;
					p++;
				}else if(kit==1){
					nodes[j].innerHTML=p;
					p--;
				}else if(kit==2){
					nodes[j].innerHTML=parseInt(nodes[j].innerHTML)+1;
				}else if(kit==3){
					nodes[j].innerHTML=parseInt(nodes[j].innerHTML)-1;
				}			
			}
		}
		
		function for_num(use,id){
			let error_1="#"+real_change;
			//页面在最前或最后
			if($(error_1).text()==real_change||$(error_1).text()==count-real_change+1)
			{
				//判断点击的第一个一半的前面还是点击的第二个一半的后面
				if($(use).text()<=real_change||$(use).text()>count-real_change)
				{
					go_back(id,0);
				}
				else
				{
					go_back(real_change,0);
					change_add($(use).text()-(real_change-1),0);
				}
				currentPage();
			}
			else
			{
				var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change;
				if($(use).text()<=real_change||inner)
				{
					if($(use).text()<=real_change)
					{
						go_back($(use).text(),0);
						change_add(1,0);
					}
					else
					{
						go_back(real_count-(count-$(use).text()),0);
						change_add(count-real_count+1,0);
					}
				}
				else
				{
					go_back(real_change,0);
					change_add($(use).text()-(real_change-1),0);
				}	
			}
			currentPage();
		}
		//遍历每个子div块，并为他们增加点击事件
		for(let j=0;j<length;j++)
		{
			let id=nodes[j].getAttribute("id");
			let use="#"+id;
			$(use).bind("click",function(){
				for_num(use,id);
			});
		}
		
		$("#home").bind("click",function(){
			go_back(1,0);
			change_add(1,0);
			currentPage();
		});
		$("#last").bind("click",function(){
			go_back(real_count,0);
			change_add(count-real_count+1,0);
			currentPage();
		});
		$("#before").bind("click",function(){
			let use="#"+sign;
			var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change+1;
			if($(use).text()<=real_change||inner)
			{
				go_back(0,2);
				currentPage();
			}
			else
			{
				change_add(0,3);
				currentPage();
			}
		});
		$("#next").bind("click",function(){
			let use="#"+sign;
			
			if($(use).text()!=count)
			{
				var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change;
				if($(use).text()<real_change||inner)
				{
					go_back(0,1);
					currentPage();
				}
				else
				{
					change_add(0,2);
					currentPage();
				}
			}
		});
		$(".l_jump").bind("click",function(){
			let val=$("#inp").val();//获取输入框的值
			val=parseInt(val);
			if(val>=1&&val<=count)
			{
				var inner=(o==0)?val>=count-real_change:val>count-real_change;
				if(val<=real_change||inner)//如果是在最前面的一半以前，或者是在最后面的一半以后
				{
					if(val<=real_change)
					{
						go_back(val,0);
						change_add(1,0);
					}
					else
					{
						go_back(real_count-(count-val),0);
						change_add(count-real_count+1,0);
					}
				}
				else
				{
					go_back(real_change,0);
					change_add(val-(real_change-1),0);
				}
			}
			else
			{
				alert("没有这么多页");
			}
			currentPage();
		});
	</script>
</html>
猜你喜欢
