靜態頁分頁功能js程式碼

Hellen.Li發表於2015-07-06
JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站長,網頁特效,js特效,js指令碼,指令碼,廣告程式碼,zzjs,zzjs.net,sky,www.zzjs.net,站長特效 網" />
<meta name="description" content="www.zzjs.net,站長特效網，站長必備js特效及廣告程式碼。大量高質量js特效，提供高質量廣告程式碼下載,盡在站長特效網" />
<title>網頁特效 靜態程式碼的分頁效果 站長特效網歡迎您。</title>
<style type="text/css">
tr{display:none}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站長特效網</a>,站長必備的高質量網頁特效和廣告程式碼。zzjs.net，站長js特效。<hr>
<!--歡迎來到站長特效網，我們網站收集大量高質量js特效，提供許多廣告程式碼下載，網址：www.zzjs.net，zzjs@msn.com,用.net打造靚站-->
<table id="www_zzjs_net">
<tr><td>站長特效01頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效02頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效03頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效04頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效05頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效06頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效07頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效08頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效09頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效10頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效11頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效12頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效13頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效14頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效15頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效16頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效17頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效18頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效19頁，打造國內最帥的網頁特效站！</td></tr>
<tr><td>站長特效20頁，打造國內最帥的網頁特效站！</td></tr>
</table>
<div id="changpage"></div>
<script language="javascript">
var obj,j;
var page=0;
var nowPage=0;//當前頁
var listNum=3;//每頁顯示<ul>數
var PagesLen;//總頁數
var PageNum=4;//分頁連結接數(5個)
onload=function(){
obj=document.getElementById("www_zzjs_net").getElementsByTagName("tr");
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"
}//歡迎來到站長特效網，我們的網址是www.zzjs.net，很好記，zz站長，js就是js特效，本站收集大量高質量js程式碼，還有許多廣告程式碼下載。
//分頁連結變換
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> '
}//歡迎來到站長特效網，我們的網址是www.zzjs.net，很好記，zz站長，js就是js特效，本站收集大量高質量js程式碼，還有許多廣告程式碼下載。
strE=' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾頁</a> '
strE2=nowPage+1+"/"+PagesLen+"頁"+" 共"+j+"條"
document.getElementById("changpage").innerHTML=strS+strC+strE+strE2
}
</script>
</body>
</html>

相關文章