网页分页实现（css+js）

最近通过自己的摸索，实现了一个简单的网页分页显示功能，现在分享给大家。有什么不足和改进之处，欢迎大家留言一起讨论，一起学习。

1.先来看看我们最终要实现的效果图（下面以共11页，7页码可见且随点击动态变换）

2.CSS方面我就不详细介绍了，在这里主要说说js的主要实现逻辑和功能

（1）获取页码显示，返回最终需要显示的代码拼接

/** 获取页码显示 */
function setPages(page,dbcount){<span style="font-family: Arial, Helvetica, sans-serif;">//page是目前需要显示的页码，dbcount是页码总数</span>
	var aa = "";//要显示的页码
	if(page>=4&&dbcount>=7){
		if(page>dbcount-3){
			for(var i=dbcount-6; i<=dbcount; i++){
				if(i==page) aa = aa+"<a href='javascript:void(0)' class='select'>"+page+"</a>";
				else aa = aa+"<a href='javascript:void(0)'>"+i+"</a>";
			}
		}
		else {
			for(var i=3; i>=-3 && page-i<=dbcount; i--){
				if(i==0) aa = aa+"<a href='javascript:void(0)' class='select'>"+page+"</a>";
				else aa = aa+"<a href='javascript:void(0)'>"+(page-i)+"</a>";
			}
		}
	}
	else if(page<4){
		for(var i=1; i<=7 && i<=dbcount; i++){
			if(page==i) aa = aa+"<a href='javascript:void(0)' class='select'>"+i+"</a>";
			else aa = aa+"<a href='javascript:void(0)'>"+i+"</a>";
		}
	}
	else if(dbcount<=7){
		aa = "<a href='javascript:void(0)'>1</a>…";
		for(var i=1; i<=dbcount; i++){
			if(page==i) aa = aa+"<a href='javascript:void(0)' class='select'>"+i+"</a>";
			else aa = aa+"<a href='javascript:void(0)'>"+i+"</a>";
		}
	}
	return aa;//返回最终需要显示的页码拼接 
}

（2）调用（1）中的js方法，得到最终结果赋值在页面中显示出来

var aa = setPages(page,dbcount);//page是目前需要显示的页码，dbcount是页码总数
aa = "<span style='cursor: pointer;' οnclick='pageUp()'>《 </span>"
    +aa+"<span style='cursor: pointer;' οnclick='pageDown()'>》 </span>";
$(".pages").html(aa);//pages显示区域随

//点击事件
$(".pages a").click(function(){
<span style="white-space:pre">	</span>if($(this).attr("class")!="page1"){
<span style="white-space:pre">		</span>$(".pages a").attr("class","");
<span style="white-space:pre">		</span>$(this).attr("class","select");
<span style="white-space:pre">		</span>//这里加入数据调用的方法，赋值页码page
<span style="white-space:pre">	</span>}
});

（3）上一页“《”和下一页“》”的实现

/** 个人中心~已领取礼包~上一页 */
function pageUp(){
	if($(".pages a.select").html()!="1"){
		var upPage = parseInt($(".pages a.select").html())-1;
		//这里加入数据调用的方法，赋值页码upPage
	}
}
/** 个人中心~已领取礼包~下一页 */
function pageDown(){
	if($(".pages a.select").html()!=$('.pages a:last').html()){
		var downPage = parseInt($(".pages a.select").html())+1;
		//这里加入数据调用的方法，赋值页码downPage
	}
}

综上是逻辑和主要实现，有什么不明白的地方，欢迎一起讨论。