[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 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
js对象的复制继承实例
Jan 10 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
原生js轮播特效
May 18 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
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分页显示制作详细讲解
2006/12/05 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python函数参数操作详解
2018/08/03 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
人事行政主管岗位职责
2015/04/09 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
教你使用TensorFlow2识别验证码
2021/06/11 Python
python读取mnist数据集方法案例详解
2021/09/04 Python
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技