[JS源碼]超長文章自動分頁（客戶端版）
更新時間：2007年01月09日 00:00:00 作者：
復(fù)制代碼 代碼如下:
<!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é)家多么好，多么神氣啊，要想做到這一點，就必須好好學(xué)習(xí)。” </p><p>“班上一個調(diào)皮鬼對此并不滿意。他說：“興許是這樣，可是，假如他坐在學(xué)校里，埋頭書本，那他就什么也發(fā)現(xiàn)不了啦?！?nbsp;</p><p>女老師竭力向孩子們證明，學(xué)習(xí)好功課的重要性。 </p><p>她說：“牛頓坐在樹下，眼睛盯著樹在思考，這時，有一個蘋果落在他的頭上，于是他發(fā)現(xiàn)了萬有引力定律，孩子們，你們想想看，做一位偉大的科學(xué)家多么好，多么神氣啊，要想做到這一點，就必須好好學(xué)習(xí)?！?nbsp;</p><p>“班上一個調(diào)皮鬼對此并不滿意。他說：“興許是這樣，可是，假如他坐在學(xué)校里，埋頭書本，那他就什么也發(fā)現(xiàn)不了啦。” </p><p>女老師竭力向孩子們證明，學(xué)習(xí)好功課的重要性。 </p><p>她說：“牛頓坐在樹下，眼睛盯著樹在思考，這時，有一個蘋果落在他的頭上，于是他發(fā)現(xiàn)了萬有引力定律，孩子們，你們想想看，做一位偉大的科學(xué)家多么好，多么神氣啊，要想做到這一點，就必須好好學(xué)習(xí)。” </p><p>“班上一個調(diào)皮鬼對此并不滿意。他說：“興許是這樣，可是，假如他坐在學(xué)校里，埋頭書本，那他就什么也發(fā)現(xiàn)不了啦?！?nbsp;</p><p>女老師竭力向孩子們證明，學(xué)習(xí)好功課的重要性。 </p><p>她說：“牛頓坐在樹下，眼睛盯著樹在思考，這時，有一個蘋果落在他的頭上，于是他發(fā)現(xiàn)了萬有引力定律，孩子們，你們想想看，做一位偉大的科學(xué)家多么好，多么神氣啊，要想做到這一點，就必須好好學(xué)習(xí)?！?nbsp;</p><p>“班上一個調(diào)皮鬼對此并不滿意。他說：“興許是這樣，可是，假如他坐在學(xué)校里，埋頭書本，那他就什么也發(fā)現(xiàn)不了啦?！?nbsp;</p><p>女老師竭力向孩子們證明，學(xué)習(xí)好功課的重要性。 </p><p>她說：“牛頓坐在樹下，眼睛盯著樹在思考，這時，有一個蘋果落在他的頭上，于是他發(fā)現(xiàn)了萬有引力定律，孩子們，你們想想看，做一位偉大的科學(xué)家多么好，多么神氣啊，要想做到這一點，就必須好好學(xué)習(xí)?！?nbsp;</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&¤tPage!=1)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一頁</a> ';
else
strDisplayPagenation+="上一頁 ";
for(var i=1;i<=pageSizeCount;i++)
{
if(i!=currentPage)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a> ';
else
strDisplayPagenation+=i+" ";
}
if(currentPage&¤tPage!=pageSizeCount)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一頁</a> ';
else
strDisplayPagenation+="下一頁 ";
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>
<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é)家多么好，多么神氣啊，要想做到這一點，就必須好好學(xué)習(xí)。” </p><p>“班上一個調(diào)皮鬼對此并不滿意。他說：“興許是這樣，可是，假如他坐在學(xué)校里，埋頭書本，那他就什么也發(fā)現(xiàn)不了啦?！?nbsp;</p><p>女老師竭力向孩子們證明，學(xué)習(xí)好功課的重要性。 </p><p>她說：“牛頓坐在樹下，眼睛盯著樹在思考，這時，有一個蘋果落在他的頭上，于是他發(fā)現(xiàn)了萬有引力定律，孩子們，你們想想看，做一位偉大的科學(xué)家多么好，多么神氣啊，要想做到這一點，就必須好好學(xué)習(xí)?！?nbsp;</p><p>“班上一個調(diào)皮鬼對此并不滿意。他說：“興許是這樣，可是，假如他坐在學(xué)校里，埋頭書本，那他就什么也發(fā)現(xiàn)不了啦。” </p><p>女老師竭力向孩子們證明，學(xué)習(xí)好功課的重要性。 </p><p>她說：“牛頓坐在樹下，眼睛盯著樹在思考，這時，有一個蘋果落在他的頭上，于是他發(fā)現(xiàn)了萬有引力定律，孩子們，你們想想看，做一位偉大的科學(xué)家多么好，多么神氣啊，要想做到這一點，就必須好好學(xué)習(xí)。” </p><p>“班上一個調(diào)皮鬼對此并不滿意。他說：“興許是這樣，可是，假如他坐在學(xué)校里，埋頭書本，那他就什么也發(fā)現(xiàn)不了啦?！?nbsp;</p><p>女老師竭力向孩子們證明，學(xué)習(xí)好功課的重要性。 </p><p>她說：“牛頓坐在樹下，眼睛盯著樹在思考，這時，有一個蘋果落在他的頭上，于是他發(fā)現(xiàn)了萬有引力定律，孩子們，你們想想看，做一位偉大的科學(xué)家多么好，多么神氣啊，要想做到這一點，就必須好好學(xué)習(xí)?！?nbsp;</p><p>“班上一個調(diào)皮鬼對此并不滿意。他說：“興許是這樣，可是，假如他坐在學(xué)校里，埋頭書本，那他就什么也發(fā)現(xiàn)不了啦?！?nbsp;</p><p>女老師竭力向孩子們證明，學(xué)習(xí)好功課的重要性。 </p><p>她說：“牛頓坐在樹下，眼睛盯著樹在思考，這時，有一個蘋果落在他的頭上，于是他發(fā)現(xiàn)了萬有引力定律，孩子們，你們想想看，做一位偉大的科學(xué)家多么好，多么神氣啊，要想做到這一點，就必須好好學(xué)習(xí)?！?nbsp;</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&¤tPage!=1)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一頁</a> ';
else
strDisplayPagenation+="上一頁 ";
for(var i=1;i<=pageSizeCount;i++)
{
if(i!=currentPage)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a> ';
else
strDisplayPagenation+=i+" ";
}
if(currentPage&¤tPage!=pageSizeCount)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一頁</a> ';
else
strDisplayPagenation+="下一頁 ";
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>
相關(guān)文章
Javascript (ECMA Script)是一種弱類型的語言.這并不意味著它沒有數(shù)據(jù)類型,只是變量或者Javascript對象屬性不需要一個特定類型的值分配給它或者它始終使用相同的值.Javascript中的變量同樣支持自由類型轉(zhuǎn)換成為適用(或者要求)的內(nèi)容以便于使用.2009-06-06
JavaScript 判斷指定字符串是否為有效數(shù)字
最近在做一個ColdFusion的項目，有一個業(yè)務(wù)Check，需要用JavaScript實現(xiàn)：判斷指定字符串是否為有效數(shù)字。2010-05-05
ASP 過濾數(shù)組重復(fù)數(shù)據(jù)函數(shù)(加強版)
asp 不重復(fù)數(shù)組數(shù)據(jù)的實現(xiàn)代碼，比上個版本，更細(xì)，更能更強，大家可以根據(jù)需要選擇。2010-05-05
這篇文章主要介紹了bootstrap 彈出框modal添加垂直方向滾軸效果,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
最近做一個項目，需要javascript動態(tài)插入樣式，結(jié)果以前的方法失效了！查了2個小時的原因竟然是自己手賤，這個最后再說2012-02-02
JS前端知識點總結(jié)之內(nèi)置對象，日期對象和定時器相關(guān)操作
這篇文章主要介紹了JS前端知識點總結(jié)之內(nèi)置對象，日期對象和定時器相關(guān)操作,簡單總結(jié)分析了JS內(nèi)置對象，日期對象和定時器相關(guān)對象方法及使用技巧,需要的朋友可以參考下2019-07-07
這篇文章主要給大家介紹了關(guān)于JS異步錯誤捕獲的一些事，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Javascript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
微信小程序整個頁面的自動適應(yīng)布局的實現(xiàn)
這篇文章主要介紹了微信小程序整個頁面的自動適應(yīng)布局的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
用js實現(xiàn)的可以讓div慢慢上升效果實現(xiàn)代碼，喜歡的朋友可以參考下2012-10-10
這篇文章主要介紹了js實現(xiàn)的早期滑動門菜單效果代碼,涉及javascript數(shù)組遍歷及通過鼠標(biāo)事件動態(tài)改變頁面元素屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08