您的当前位置：首页正文

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

2020-11-27 来源：华拓网

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>静态分页(首尾页)www.gxlcms.com</title> 
</head> 
<body> 
<style> 
ul {display:none} 
</style> 
 
 
<li>01</li> 
 
 
<li>02</li> 
 
 
<li>03</li> 
 
 
<li>04</li> 
 
 
<li>05</li> 
 
 
<li>06</li> 
 
 
<li>07</li> 
 
 
<li>08</li> 
 
 
<li>09</li> 
 
 
<li>10</li> 
 
 
<li>11</li> 
 
 
<li>12</li> 
 
 
<li>13</li> 
 
 
<li>14</li> 
 
 
<li>15</li> 
 
 
<li>16</li> 
 
 
<li>17</li> 
 
 
<li>18</li> 
 
 
<li>19</li> 
 
 
<li>20</li> 
 
 
 
<script> 
var obj,j; 
var page=0; 
var nowPage=0;//当前页 
var listNum=3;//每页显示数 
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='首页 ' 
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+=''+(i+1)+' ' 
else strC+=''+(i+1)+' ' 
} 
strE=' 尾页 ' 
strE2=nowPage+1+"/"+PagesLen+"页"+" 共"+j+"条" 
document.getElementById("changpage").innerHTML=strS+strC+strE+strE2 
} 
</ script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

首页

热点资讯

义务教育

高等教育

出国留学

考研考公

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