Javascript靜態(tài)分頁(多個(gè)資料，靜態(tài)自動(dòng)分頁)

更新時(shí)間：2009年02月21日 03:34:13 作者：

看的處理是個(gè)不錯(cuò)的想法與應(yīng)用大家可以看下。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>靜態(tài)分頁(首尾頁)www.dhdzp.com</title> </head> <body> <style> ul {display:none} </style> <div   class="ws4yoac"   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="46gksyq"   id="changpage"></div> <script> var obj,j; var page=0; var nowPage=0;//當(dāng)前頁 var listNum=3;//每頁顯示<ul>數(shù) var PagesLen;//總頁數(shù) var PageNum=4;//分頁鏈接接數(shù)(5個(gè)) onload=function(){ obj=document.getElementById("mydiv").getElementsByTagName("ul"); j=obj.length PagesLen=Math.ceil(j/listNum); upPage(0) } function upPage(p){ nowPage=p //內(nèi)容變換 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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

Javascript拖拽系列文章1之offsetParent屬性
這個(gè)系列文章主要是講述實(shí)現(xiàn)Javascript拖拽功能的基礎(chǔ)知識(shí)，并將在最后給出一個(gè)完整的示例。適合對拖拽完全不懂的人閱讀
2008-09-09
淺談layui框架自帶分頁和表格重載的接口解析問題
今天小編就為大家分享一篇淺談layui框架自帶分頁和表格重載的接口解析問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
js 變量類型轉(zhuǎn)換常用函數(shù)與代碼[比較全]
腳本之家收集了一些數(shù)字與字符之間的轉(zhuǎn)換，數(shù)組轉(zhuǎn)為字符等函數(shù)代碼。
2009-12-12
js對文章內(nèi)容進(jìn)行分頁示例代碼
這篇文章主要介紹了使用js對文章內(nèi)容進(jìn)行分頁的具體實(shí)現(xiàn),需要的朋友可以參考下
2014-03-03
JavaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡單實(shí)例
下面小編就為大家?guī)硪黄狫avaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
淺談原型對象的常用開發(fā)模式
下面小編就為大家?guī)硪黄獪\談原型對象的常用開發(fā)模式。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
點(diǎn)擊標(biāo)簽切換和自動(dòng)切換DIV選項(xiàng)卡
點(diǎn)擊標(biāo)簽切換DIV的效果，在很多地方都有見到過，而且實(shí)現(xiàn)的方法有很多，本例介紹的這個(gè)可以切換和自動(dòng)切換DIV選項(xiàng)卡
2014-08-08
js實(shí)現(xiàn)不重復(fù)導(dǎo)入的方法
這篇文章主要介紹了js實(shí)現(xiàn)不重復(fù)導(dǎo)入的方法,實(shí)例分析了JavaScript基于文件與字符串判斷操作實(shí)現(xiàn)JS文件不重復(fù)導(dǎo)入的相關(guān)技巧,需要的朋友可以參考下
2016-03-03
js實(shí)現(xiàn)文本框選中的方法
這篇文章主要介紹了js實(shí)現(xiàn)文本框選中的方法,涉及javascript中select()方法的使用技巧,需要的朋友可以參考下
2015-05-05
js根據(jù)日期判斷星座的示例代碼
本篇文章主要是對js根據(jù)日期判斷星座的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01