[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 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
JS实现基本的网页计算器功能示例
Jan 16 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
Python简单连接MongoDB数据库的方法
2016/03/15 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
研究生自荐信
2013/10/09 职场文书
战友聚会邀请函
2014/01/18 职场文书
给孩子的新年寄语
2014/04/08 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
党的生日演讲稿
2014/09/10 职场文书
追讨欠款律师函
2015/05/27 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL