Javascript靜態分頁(多個資料，靜態自動分頁)

2019-11-21 01:27:46

字體：大中小

來源：轉載

供稿：網友

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>靜態分頁(首尾頁)m.survivalescaperooms.com</title> </head> <body> <style> ul {display:none} </style> <div   class="iwvjtn8m0"   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   class="iwvjtn8m0"   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>  ' 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> ' else strC+='<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> ' } strE=' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾頁</a>  ' strE2=nowPage+1+"/"+PagesLen+"頁"+"  共"+j+"條" document.getElementById("changpage").innerHTML=strS+strC+strE+strE2 } </script> </body> </html>

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

上一篇：JavaScript 調試器簡介

下一篇：用jQuery簡化JavaScript開發分析