Javascript静态分页(多个资料，静态自动分页)

更新时间：2009年02月21日 03:34:13 作者：

看的处理是个不错的想法与应用大家可以看下。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>静态分页(首尾页)www.jb51.net</title> </head> <body> <style> ul {display:none} </style> <div id="mydiv"> <ul> <li>01</li> </ul> <ul> <li>02</li> </ul> <ul> <li>03</li> </ul> <ul> <li>04</li> </ul> <ul> <li>05</li> </ul> <ul> <li>06</li> </ul> <ul> <li>07</li> </ul> <ul> <li>08</li> </ul> <ul> <li>09</li> </ul> <ul> <li>10</li> </ul> <ul> <li>11</li> </ul> <ul> <li>12</li> </ul> <ul> <li>13</li> </ul> <ul> <li>14</li> </ul> <ul> <li>15</li> </ul> <ul> <li>16</li> </ul> <ul> <li>17</li> </ul> <ul> <li>18</li> </ul> <ul> <li>19</li> </ul> <ul> <li>20</li> </ul> </div> <div id="changpage"></div> <script> var obj,j; var page=0; var nowPage=0;//当前页 var listNum=3;//每页显示<ul>数 var PagesLen;//总页数 var PageNum=4;//分页链接接数(5个) onload=function(){ obj=document.getElementById("mydiv").getElementsByTagName("ul"); j=obj.length PagesLen=Math.ceil(j/listNum); upPage(0) } function upPage(p){ nowPage=p //内容变换 for (var i=0;i<j;i++){ obj[i].style.display="none" } for (var i=p*listNum;i<(p+1)*listNum;i++){ if(obj[i])obj[i].style.display="block" } //分页链接变换 strS='<a href="###" onclick="upPage(0)">首页</a>&nbsp;&nbsp;' var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2) var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1 var strC="",startPage,endPage; if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1} else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页 else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t} for (var i=startPage;i<=endPage;i++){ if (i==nowPage)strC+='<a href="###" style="color:red;font-weight:700;" onclick="upPage('+i+')">'+(i+1)+'</a>&nbsp;' else strC+='<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a>&nbsp;' } strE='&nbsp;<a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a>&nbsp;&nbsp;' strE2=nowPage+1+"/"+PagesLen+"页"+"&nbsp;&nbsp;共"+j+"条" document.getElementById("changpage").innerHTML=strS+strC+strE+strE2 } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

Javascript拖拽系列文章1之offsetParent属性
这个系列文章主要是讲述实现Javascript拖拽功能的基础知识，并将在最后给出一个完整的示例。适合对拖拽完全不懂的人阅读
2008-09-09
浅谈layui框架自带分页和表格重载的接口解析问题
今天小编就为大家分享一篇浅谈layui框架自带分页和表格重载的接口解析问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
js 变量类型转换常用函数与代码[比较全]
脚本之家收集了一些数字与字符之间的转换，数组转为字符等函数代码。
2009-12-12
js对文章内容进行分页示例代码
这篇文章主要介绍了使用js对文章内容进行分页的具体实现,需要的朋友可以参考下
2014-03-03
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
下面小编就为大家带来一篇JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
浅谈原型对象的常用开发模式
下面小编就为大家带来一篇浅谈原型对象的常用开发模式。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
点击标签切换和自动切换DIV选项卡
点击标签切换DIV的效果，在很多地方都有见到过，而且实现的方法有很多，本例介绍的这个可以切换和自动切换DIV选项卡
2014-08-08
js实现不重复导入的方法
这篇文章主要介绍了js实现不重复导入的方法,实例分析了JavaScript基于文件与字符串判断操作实现JS文件不重复导入的相关技巧,需要的朋友可以参考下
2016-03-03
js实现文本框选中的方法
这篇文章主要介绍了js实现文本框选中的方法,涉及javascript中select()方法的使用技巧,需要的朋友可以参考下
2015-05-05
js根据日期判断星座的示例代码
本篇文章主要是对js根据日期判断星座的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01

Javascript静态分页(多个资料，静态自动分页)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具