[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生成二级菜单的实例代码
Jun 24 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
js保留两位小数方法总结
Jan 31 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
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
PHP 简单数组排序实现代码
2009/08/05 PHP
php 文件上传系统手记
2009/10/26 PHP
PHP return语句的另一个作用
2014/07/30 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
js获取单选按钮的数据
2006/11/27 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
详解webpack babel的配置
2018/01/09 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python实现ip地址的包含关系判断
2020/02/07 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
python怎么判断模块安装完成
2020/06/19 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
建筑项目策划书
2014/01/13 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
实用的简历自我评价
2014/03/06 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
新教师个人工作总结
2015/02/06 职场文书
三下乡活动心得体会
2016/01/23 职场文书
《从现在开始》教学反思
2016/02/16 职场文书