[JS源码]超长文章自动分页(客户端版)


Posted in Javascript onJanuary 09, 2007
<!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>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p>";  // 封装DHTMLpagenation  
function DHTMLpagenation(content) { with (this)  
{  
  // client static html file pagenation  
  // Scipit by blueDestiny,never-online, www.never-online.net  
  this.content=content; // 内容  
  this.contentLength=content.length; // 内容长度  
  this.pageSizeCount; // 总页数  
  this.perpageLength=100; //default perpage byte length.  
  this.currentPage=1; // 起始页为第1页  
  //this.regularExp=/.+[\?\&]{1}page=(\d+)/;  
  this.regularExp=/\d+/; // 建立正则表达式,匹配数字型字符串。  
  this.divDisplayContent;  
  this.contentStyle=null;  
  this.strDisplayContent="";  
  this.divDisplayPagenation;  
  this.strDisplayPagenation="";  
  // 把第二个参数赋给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 + " 字符,调整字符数:<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);  
}};  
//跳转至某一页  
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();  
}};  
//显示当前页内容  
DHTMLpagenation.displayContent=function() { with (this)  
{  
  divDisplayContent.innerHTML=strDisplayContent;  
}};  
//改变每页的字节数  
DHTMLpagenation.change=function(iPerpageLength) { with(this)  
{  
  if(regularExp.test(iPerpageLength))  
  {  
    DHTMLpagenation.perpageLength=iPerpageLength;  
    DHTMLpagenation.currentPage=1;  
    DHTMLpagenation.initialize();  
  }  
  else  
  {  
    alert("请输入数字");  
  }  
}};  
// 接口API  
// DHTMLpagenation(strContent[,perpageLength])  
DHTMLpagenation(s,100);  
// Power By blueDestiny,never-online  
//-->  
</SCRIPT>  
</BODY>  
</HTML>
Javascript 相关文章推荐
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
node.js实现上传文件功能
Jul 15 Javascript
Javascript与vbscript数据共享
Jan 09 #Javascript
In Javascript Class, how to call the prototype method.(three method)
Jan 09 #Javascript
js技巧--转义符&quot;\&quot;的妙用
Jan 09 #Javascript
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 #Javascript
Javascript miscellanea -display data real time, using window.status
Jan 09 #Javascript
Javascript - HTML的request类
Jan 09 #Javascript
贴一个在Mozilla中常用的Javascript代码
Jan 09 #Javascript
You might like
星际原理概述
2020/03/04 星际争霸
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
处理单名多值表单的详解
2013/06/08 PHP
php数组使用规则分析
2015/02/27 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
JavaScript 大数据相加的问题
2011/08/03 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
用console.table()调试javascript
2014/09/04 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
python二分法实现实例
2013/11/21 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
Python如何使用字符打印照片
2020/01/03 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
sealed修饰符是干什么的
2012/10/23 面试题
商务专员岗位职责
2013/11/23 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
小班开学寄语
2014/04/04 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
Flask response响应的具体使用
2021/07/15 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers