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

代码如下:

<!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&&currentPage!=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&&currentPage!=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>

赞 (0)

相关推荐

  • [JS源码]超长文章自动分页（客户端版）

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <HTML>  <HEAD>  <TITLE> New Document </TITLE>  <META NAME="Generator" CONTENT="EditPlus">  <META NAME="Aut

  • 详解从Vue.js源码看异步更新DOM策略及nextTick

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/answershuto/learnVue. 在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助. 可能会有理解存在偏差的地方,欢迎提issue指出,

  • 深入理解Vue.js源码之事件机制

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/answershuto/learnVue. 在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助. 可能会有理解存在偏差的地方,欢迎提issue指出

  • Vue.js源码分析之自定义指令详解

    Vue.js源码分析之自定义指令详解

    前言 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上时,该元素在初次渲染.插入到父节点.更新.解绑时可以执行一些特定的操作(钩子函数() 自定义指令有两种注册方式,一种是全局注册,使用Vue.directive(指令名,配置参数)注册,注册之后所有的Vue实例都可以使用,另一种是局部注册,在创建Vue实例时通过directives属性创建局部指

  • Three.js源码阅读笔记(Object3D类)

    这是Three.js源码阅读笔记的第二篇,直接开始. Core::Object3D Object3D似乎是Three.js框架中最重要的类,相当一部分其他的类都是继承自Object3D类,比如场景类.几何形体类.相机类.光照类等等:他们都是3D空间中的对象,所以称为Object3D类.Object3D构造函数如下: 复制代码 代码如下: THREE.Object3D = function () { THREE.Object3DLibrary.push( this ); this.id = THR

  • Three.js源码阅读笔记(光照部分)

    天气越来越冷了,人也越来越懒怠,越来越像呆在温暖的寝室里看小说或者打游戏,也好久没看Three.js源码了.今天天气不错,接着看! 这次从光照部分看起:光照模型,从光线本身角度来看包括环境光.平行光.点光源,从物体表面材质角度看又包括漫反射和镜面反射. Lights:Light 复制代码 代码如下: THREE.Light = function ( hex ) { THREE.Object3D.call( this ); this.color = new THREE.Color( hex );

  • Three.js源码阅读笔记(物体是如何组织的)

    这是Three.js源码阅读笔记第三篇.之前两篇主要是关于核心对象的,这些核心对象主要围绕着矢量vector3对象和矩阵matrix4对象展开的,关注的是空间中的单个顶点的位置和变化.这一篇将主要讨论Three.js中的物体是如何组织的:即如何将顶点.表面.材质组合成为一个具体的对象. Object::Mesh 该构造函数构造了一个空间中的物体.之所以叫"网格"是因为,实际上具有体积的物体基本都是建模成为"网格"的. 复制代码 代码如下: THREE.Mesh =

  • jQuery实例—选项卡的简单实现(js源码和jQuery)

    jQuery实例—选项卡的简单实现(js源码和jQuery)

    分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • Three.js源码阅读笔记(基础的核心Core对象)

    Three.js是一个比较伟大的webgl开源库,它简化了浏览器3D编程,使得使用JavaScript在浏览器中创建复杂的场景变得容易很多.Github上众多webgl demo令我兴奋不已,跃跃欲试.由于这个库还处在开发阶段,因此资料非常匮乏,爱好者大部分时间不得不通过阅读该库的源码进行学习,我现在也准备这样做. 这是第一篇笔记,先从最基础的核心(Core)对象开始. Core::Vector2 该构造函数用来创建一个表示二维向量的对象 复制代码 代码如下: THREE.Vector2 = f

  • 通过网页查看JS源码中汉字显示乱码的解决方法

    通过网页查看JS源码中汉字显示乱码的解决方法

    前言 在网页中读取js文件,中文显示正常(比如alert出js文件的中文信息).但当浏览器查看js文件源代码时,则会看到代码里的中文全是乱码.虽然不影响程序运行,但是在读js文件代码时,会受影响. 前几天在浏览器查看自己写的web代码的时候,发现外联js文件的汉字注释显示为乱码,如下图所示: 这种瑕疵对于有轻微强迫症+代码洁癖的人来说是不可容忍的 本来还以为是js文件没保存UTF-8格式,又把js文件重新保存了一遍 可惜,然并卵... 不过,最后还是被我找到原因了. 其实这个只是浏览器设置问题,

随机推荐