网页分页实现（css+js）

来源：互联网发布：深圳淘宝推广招聘编辑：程序博客网时间：2024/06/10 21:25

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

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;' onclick='pageUp()'>《 </span>"    +aa+"<span style='cursor: pointer;' onclick='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>}});

/** 个人中心~已领取礼包~上一页 */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}}

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

0 0