[JS源碼]超長文章自動(dòng)分頁(客戶端版)
更新時(shí)間: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>她說:“牛頓坐在樹下,眼睛盯著樹在思考,這時(shí),有一個(gè)蘋果落在他的頭上,于是他發(fā)現(xiàn)了萬有引力定律,孩子們,你們想想看,做一位偉大的科學(xué)家多么好,多么神氣啊,要想做到這一點(diǎn),就必須好好學(xué)習(xí)。” </p><p>“班上一個(gè)調(diào)皮鬼對(duì)此并不滿意。他說:“興許是這樣,可是,假如他坐在學(xué)校里,埋頭書本,那他就什么也發(fā)現(xiàn)不了啦?!?nbsp;</p><p>女老師竭力向孩子們證明,學(xué)習(xí)好功課的重要性。 </p><p>她說:“牛頓坐在樹下,眼睛盯著樹在思考,這時(shí),有一個(gè)蘋果落在他的頭上,于是他發(fā)現(xiàn)了萬有引力定律,孩子們,你們想想看,做一位偉大的科學(xué)家多么好,多么神氣啊,要想做到這一點(diǎn),就必須好好學(xué)習(xí)。” </p><p>“班上一個(gè)調(diào)皮鬼對(duì)此并不滿意。他說:“興許是這樣,可是,假如他坐在學(xué)校里,埋頭書本,那他就什么也發(fā)現(xiàn)不了啦。” </p><p>女老師竭力向孩子們證明,學(xué)習(xí)好功課的重要性。 </p><p>她說:“牛頓坐在樹下,眼睛盯著樹在思考,這時(shí),有一個(gè)蘋果落在他的頭上,于是他發(fā)現(xiàn)了萬有引力定律,孩子們,你們想想看,做一位偉大的科學(xué)家多么好,多么神氣啊,要想做到這一點(diǎn),就必須好好學(xué)習(xí)?!?nbsp;</p><p>“班上一個(gè)調(diào)皮鬼對(duì)此并不滿意。他說:“興許是這樣,可是,假如他坐在學(xué)校里,埋頭書本,那他就什么也發(fā)現(xiàn)不了啦。” </p><p>女老師竭力向孩子們證明,學(xué)習(xí)好功課的重要性。 </p><p>她說:“牛頓坐在樹下,眼睛盯著樹在思考,這時(shí),有一個(gè)蘋果落在他的頭上,于是他發(fā)現(xiàn)了萬有引力定律,孩子們,你們想想看,做一位偉大的科學(xué)家多么好,多么神氣啊,要想做到這一點(diǎn),就必須好好學(xué)習(xí)。” </p><p>“班上一個(gè)調(diào)皮鬼對(duì)此并不滿意。他說:“興許是這樣,可是,假如他坐在學(xué)校里,埋頭書本,那他就什么也發(fā)現(xiàn)不了啦?!?nbsp;</p><p>女老師竭力向孩子們證明,學(xué)習(xí)好功課的重要性。 </p><p>她說:“牛頓坐在樹下,眼睛盯著樹在思考,這時(shí),有一個(gè)蘋果落在他的頭上,于是他發(fā)現(xiàn)了萬有引力定律,孩子們,你們想想看,做一位偉大的科學(xué)家多么好,多么神氣啊,要想做到這一點(diǎn),就必須好好學(xué)習(xí)。” </p><p>“班上一個(gè)調(diào)皮鬼對(duì)此并不滿意。他說:“興許是這樣,可是,假如他坐在學(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="";
// 把第二個(gè)參數(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("請(qǐng)輸入數(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>她說:“牛頓坐在樹下,眼睛盯著樹在思考,這時(shí),有一個(gè)蘋果落在他的頭上,于是他發(fā)現(xiàn)了萬有引力定律,孩子們,你們想想看,做一位偉大的科學(xué)家多么好,多么神氣啊,要想做到這一點(diǎn),就必須好好學(xué)習(xí)。” </p><p>“班上一個(gè)調(diào)皮鬼對(duì)此并不滿意。他說:“興許是這樣,可是,假如他坐在學(xué)校里,埋頭書本,那他就什么也發(fā)現(xiàn)不了啦?!?nbsp;</p><p>女老師竭力向孩子們證明,學(xué)習(xí)好功課的重要性。 </p><p>她說:“牛頓坐在樹下,眼睛盯著樹在思考,這時(shí),有一個(gè)蘋果落在他的頭上,于是他發(fā)現(xiàn)了萬有引力定律,孩子們,你們想想看,做一位偉大的科學(xué)家多么好,多么神氣啊,要想做到這一點(diǎn),就必須好好學(xué)習(xí)。” </p><p>“班上一個(gè)調(diào)皮鬼對(duì)此并不滿意。他說:“興許是這樣,可是,假如他坐在學(xué)校里,埋頭書本,那他就什么也發(fā)現(xiàn)不了啦。” </p><p>女老師竭力向孩子們證明,學(xué)習(xí)好功課的重要性。 </p><p>她說:“牛頓坐在樹下,眼睛盯著樹在思考,這時(shí),有一個(gè)蘋果落在他的頭上,于是他發(fā)現(xiàn)了萬有引力定律,孩子們,你們想想看,做一位偉大的科學(xué)家多么好,多么神氣啊,要想做到這一點(diǎn),就必須好好學(xué)習(xí)?!?nbsp;</p><p>“班上一個(gè)調(diào)皮鬼對(duì)此并不滿意。他說:“興許是這樣,可是,假如他坐在學(xué)校里,埋頭書本,那他就什么也發(fā)現(xiàn)不了啦。” </p><p>女老師竭力向孩子們證明,學(xué)習(xí)好功課的重要性。 </p><p>她說:“牛頓坐在樹下,眼睛盯著樹在思考,這時(shí),有一個(gè)蘋果落在他的頭上,于是他發(fā)現(xiàn)了萬有引力定律,孩子們,你們想想看,做一位偉大的科學(xué)家多么好,多么神氣啊,要想做到這一點(diǎn),就必須好好學(xué)習(xí)。” </p><p>“班上一個(gè)調(diào)皮鬼對(duì)此并不滿意。他說:“興許是這樣,可是,假如他坐在學(xué)校里,埋頭書本,那他就什么也發(fā)現(xiàn)不了啦?!?nbsp;</p><p>女老師竭力向孩子們證明,學(xué)習(xí)好功課的重要性。 </p><p>她說:“牛頓坐在樹下,眼睛盯著樹在思考,這時(shí),有一個(gè)蘋果落在他的頭上,于是他發(fā)現(xiàn)了萬有引力定律,孩子們,你們想想看,做一位偉大的科學(xué)家多么好,多么神氣啊,要想做到這一點(diǎn),就必須好好學(xué)習(xí)。” </p><p>“班上一個(gè)調(diào)皮鬼對(duì)此并不滿意。他說:“興許是這樣,可是,假如他坐在學(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="";
// 把第二個(gè)參數(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("請(qǐng)輸入數(shù)字");
}
}};
// 接口API
// DHTMLpagenation(strContent[,perpageLength])
DHTMLpagenation(s,100);
// Power By blueDestiny,never-online
//-->
</SCRIPT>
</BODY>
</HTML>
相關(guān)文章
JavaScript 判斷指定字符串是否為有效數(shù)字
最近在做一個(gè)ColdFusion的項(xiàng)目,有一個(gè)業(yè)務(wù)Check,需要用JavaScript實(shí)現(xiàn):判斷指定字符串是否為有效數(shù)字。2010-05-05ASP 過濾數(shù)組重復(fù)數(shù)據(jù)函數(shù)(加強(qiáng)版)
asp 不重復(fù)數(shù)組數(shù)據(jù)的實(shí)現(xiàn)代碼,比上個(gè)版本,更細(xì),更能更強(qiáng),大家可以根據(jù)需要選擇。2010-05-05JS前端知識(shí)點(diǎn)總結(jié)之內(nèi)置對(duì)象,日期對(duì)象和定時(shí)器相關(guān)操作
這篇文章主要介紹了JS前端知識(shí)點(diǎn)總結(jié)之內(nèi)置對(duì)象,日期對(duì)象和定時(shí)器相關(guān)操作,簡單總結(jié)分析了JS內(nèi)置對(duì)象,日期對(duì)象和定時(shí)器相關(guān)對(duì)象方法及使用技巧,需要的朋友可以參考下2019-07-07微信小程序整個(gè)頁面的自動(dòng)適應(yīng)布局的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序整個(gè)頁面的自動(dòng)適應(yīng)布局的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07JS 實(shí)現(xiàn)Div向上浮動(dòng)的實(shí)現(xiàn)代碼
用js實(shí)現(xiàn)的可以讓div慢慢上升效果實(shí)現(xiàn)代碼,喜歡的朋友可以參考下2012-10-10js實(shí)現(xiàn)的早期滑動(dòng)門菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)的早期滑動(dòng)門菜單效果代碼,涉及javascript數(shù)組遍歷及通過鼠標(biāo)事件動(dòng)態(tài)改變頁面元素屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08