快捷導(dǎo)航
[JS源碼]超長文章自動分頁（客戶端版）

更新時間：2007年01月09日 00:00:00 作者：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
<HEAD>  
<TITLE> New Document </TITLE>  
<META NAME="Generator" CONTENT="EditPlus">  
<META NAME="Author" CONTENT="">  
<META NAME="Keywords" CONTENT="">  
<META NAME="Description" CONTENT="">  
<style>  
* {  
font-size:10.2pt;  
font-family:tahoma;  
line-height:150%;  
}  
.divContent  
{  
border:1px solid red;  
background-color:#FFD2D3;  
width:500px;  
word-break:break-all;  
margin:10px 0px 10px;  
padding:10px;  
}  
</style>  
</HEAD>  
<BODY>  
header  
<div id="divPagenation"></div>  
<div id="divContent"></div>  
footer  
<SCRIPT LANGUAGE="JavaScript">  
<!--  
s="<p>女老師竭力向孩子們證明，學(xué)習(xí)好功課的重要性。 </p><p>她說：“牛頓坐在樹下，眼睛盯著樹在思考，這時，有一個蘋果落在他的頭上，于是他發(fā)現(xiàn)了萬有引力定律，孩子們，你們想想看，做一位偉大的科學(xué)家多么好，多么神氣啊，要想做到這一點(diǎn)，就必須好好學(xué)習(xí)。” </p><p>“班上一個調(diào)皮鬼對此并不滿意。他說：“興許是這樣，可是，假如他坐在學(xué)校里，埋頭書本，那他就什么也發(fā)現(xiàn)不了啦。” </p><p>女老師竭力向孩子們證明，學(xué)習(xí)好功課的重要性。 </p><p>她說：“牛頓坐在樹下，眼睛盯著樹在思考，這時，有一個蘋果落在他的頭上，于是他發(fā)現(xiàn)了萬有引力定律，孩子們，你們想想看，做一位偉大的科學(xué)家多么好，多么神氣啊，要想做到這一點(diǎn)，就必須好好學(xué)習(xí)?！?nbsp;</p><p>“班上一個調(diào)皮鬼對此并不滿意。他說：“興許是這樣，可是，假如他坐在學(xué)校里，埋頭書本，那他就什么也發(fā)現(xiàn)不了啦。” </p><p>女老師竭力向孩子們證明，學(xué)習(xí)好功課的重要性。 </p><p>她說：“牛頓坐在樹下，眼睛盯著樹在思考，這時，有一個蘋果落在他的頭上，于是他發(fā)現(xiàn)了萬有引力定律，孩子們，你們想想看，做一位偉大的科學(xué)家多么好，多么神氣啊，要想做到這一點(diǎn)，就必須好好學(xué)習(xí)?！?nbsp;</p><p>“班上一個調(diào)皮鬼對此并不滿意。他說：“興許是這樣，可是，假如他坐在學(xué)校里，埋頭書本，那他就什么也發(fā)現(xiàn)不了啦?！?nbsp;</p><p>女老師竭力向孩子們證明，學(xué)習(xí)好功課的重要性。 </p><p>她說：“牛頓坐在樹下，眼睛盯著樹在思考，這時，有一個蘋果落在他的頭上，于是他發(fā)現(xiàn)了萬有引力定律，孩子們，你們想想看，做一位偉大的科學(xué)家多么好，多么神氣啊，要想做到這一點(diǎn)，就必須好好學(xué)習(xí)?！?nbsp;</p><p>“班上一個調(diào)皮鬼對此并不滿意。他說：“興許是這樣，可是，假如他坐在學(xué)校里，埋頭書本，那他就什么也發(fā)現(xiàn)不了啦?！?nbsp;</p><p>女老師竭力向孩子們證明，學(xué)習(xí)好功課的重要性。 </p><p>她說：“牛頓坐在樹下，眼睛盯著樹在思考，這時，有一個蘋果落在他的頭上，于是他發(fā)現(xiàn)了萬有引力定律，孩子們，你們想想看，做一位偉大的科學(xué)家多么好，多么神氣啊，要想做到這一點(diǎn)，就必須好好學(xué)習(xí)。” </p><p>“班上一個調(diào)皮鬼對此并不滿意。他說：“興許是這樣，可是，假如他坐在學(xué)校里，埋頭書本，那他就什么也發(fā)現(xiàn)不了啦?！?nbsp;</p>";  

// 封裝DHTMLpagenation  

function DHTMLpagenation(content) { with (this)  
{  
  // client static html file pagenation  
  // Scipit by blueDestiny,never-online, www.never-online.net  

  this.content=content; // 內(nèi)容  
  this.contentLength=content.length; // 內(nèi)容長度  
  this.pageSizeCount; // 總頁數(shù)  
  this.perpageLength=100; //default perpage byte length.  
  this.currentPage=1; // 起始頁為第1頁  
  //this.regularExp=/.+[\?\&]{1}page=(\d+)/;  
  this.regularExp=/\d+/; // 建立正則表達(dá)式，匹配數(shù)字型字符串。  

  this.divDisplayContent;  
  this.contentStyle=null;  
  this.strDisplayContent="";  
  this.divDisplayPagenation;  
  this.strDisplayPagenation="";  

  // 把第二個參數(shù)賦給perpageLength;  
  arguments.length==2?perpageLength=arguments[1]:'';  

  try {  
    divExecuteTime=document.createElement("DIV");  
    document.body.appendChild(divExecuteTime);  
  }  
  catch(e)  
  {  
  }  

  // 得到divPagenation容器。  
  if(document.getElementById("divPagenation"))  
  {  
    divDisplayPagenation=document.getElementById("divPagenation");  
  }  
  else  
  {  
    try  
    {  
      divDisplayPagenation=document.createElement("DIV");  
      divDisplayPagenation.id="divPagenation";  
      document.body.appendChild(divDisplayPagenation);  
    }  
    catch(e)  
    {  
      return false;  
    }  
  }  

  // 得到divContent容器  
  if(document.getElementById("divContent"))  
  {  
    divDisplayContent=document.getElementById("divContent");  
  }  
  else  
  {  
    try  
    {  
      divDisplayContent=document.createElement("DIV");  
      divDisplayContent.id="divContent";  
      document.body.appendChild(divDisplayContent);  
    }  
    catch(e)  
    {  
      return false;  
    }  
  }  

  DHTMLpagenation.initialize();  
  return this;  

}};  

//初始化分頁；  
//包括把加入CSS，檢查是否需要分頁  
DHTMLpagenation.initialize=function() { with (this)  
{  
  divDisplayContent.className=contentStyle!=null?contentStyle:"divContent";  
  if(contentLength<=perpageLength)  
  {  
    strDisplayContent=content;  
    divDisplayContent.innerHTML=strDisplayContent;  
    return null;  
  }  

  pageSizeCount=Math.ceil((contentLength/perpageLength));  

  DHTMLpagenation.goto(currentPage);  
  DHTMLpagenation.displayContent();  
}};  

//顯示分頁欄  
DHTMLpagenation.displayPage=function() { with (this)  
{  
  strDisplayPagenation="分頁：";  

  if(currentPage&&currentPage!=1)  
    strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一頁</a>&nbsp;&nbsp;';  
  else  
    strDisplayPagenation+="上一頁&nbsp;&nbsp;";  

  for(var i=1;i<=pageSizeCount;i++)  
  {  
    if(i!=currentPage)  
      strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>&nbsp;&nbsp;';  
    else  
      strDisplayPagenation+=i+"&nbsp;&nbsp;";  
  }  

  if(currentPage&&currentPage!=pageSizeCount)  
    strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一頁</a>&nbsp;&nbsp;';  
  else  
    strDisplayPagenation+="下一頁&nbsp;&nbsp;";  

  strDisplayPagenation+="共 " + pageSizeCount + " 頁，每頁" + perpageLength + " 字符，調(diào)整字符數(shù)：<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='確定' onclick='DHTMLpagenation.change(document.getElementById(\"ctlPerpageLength\").value);'>";  

  divDisplayPagenation.innerHTML=strDisplayPagenation;  
}};  
//上一頁  
DHTMLpagenation.previous=function() { with(this)  
{  
  DHTMLpagenation.goto(currentPage-1);  
}};  
//下一頁  
DHTMLpagenation.next=function() { with(this)  
{  
  DHTMLpagenation.goto(currentPage+1);  
}};  
//跳轉(zhuǎn)至某一頁  
DHTMLpagenation.goto=function(iCurrentPage) { with (this)  
{  
  startime=new Date();  
  if(regularExp.test(iCurrentPage))  
  {  
    currentPage=iCurrentPage;  
    strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);  
  }  
  else  
  {  
    alert("page parameter error!");  
  }  
  DHTMLpagenation.displayPage();  
  DHTMLpagenation.displayContent();  
}};  
//顯示當(dāng)前頁內(nèi)容  
DHTMLpagenation.displayContent=function() { with (this)  
{  
  divDisplayContent.innerHTML=strDisplayContent;  
}};  
//改變每頁的字節(jié)數(shù)  
DHTMLpagenation.change=function(iPerpageLength) { with(this)  
{  
  if(regularExp.test(iPerpageLength))  
  {  
    DHTMLpagenation.perpageLength=iPerpageLength;  
    DHTMLpagenation.currentPage=1;  
    DHTMLpagenation.initialize();  
  }  
  else  
  {  
    alert("請輸入數(shù)字");  
  }  
}};  

// 接口API  
// DHTMLpagenation(strContent[,perpageLength])  

DHTMLpagenation(s,100);  

// Power By blueDestiny,never-online  
//-->  
</SCRIPT>  
</BODY>  
</HTML>