客户端静态页面玩分页


Posted in Javascript onJune 26, 2006

<!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>";
function DHTMLpagenation(content) { with (this)
{
 // client static html file pagenation

 this.content=content;
 this.contentLength=content.length;
 this.pageSizeCount;
 this.perpageLength=100; //default perpage byte length.
 this.currentPage=1;
 //this.regularExp=/.+[\?\&]{1}page=(\d+)/;
 this.regularExp=/\d+/;

 this.divDisplayContent;
 this.contentStyle=null;
 this.strDisplayContent="";
 this.divDisplayPagenation;
 this.strDisplayPagenation="";

 arguments.length==2?perpageLength=arguments[1]:'';

 try {
  divExecuteTime=document.createElement("DIV");
  document.body.appendChild(divExecuteTime);
 }
 catch(e)
 {
 }
 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;
  }
 }

 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;
  }
 }

 DHTMLpagenation.initialize();
 return this;

}};
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("请输入数字");
 }
}};

// method
// DHTMLpagenation(strContent,perpageLength)

DHTMLpagenation(s,100);

//-->
</SCRIPT>
</BODY>
</HTML>

Javascript 相关文章推荐
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
图片之间的切换
Jun 26 #Javascript
超级强大的表单验证
Jun 26 #Javascript
Javascript调用XML制作连动下拉列表框
Jun 25 #Javascript
网页里控制图片大小的相关代码
Jun 25 #Javascript
如何取得中文输入的真实长度?
Jun 24 #Javascript
快速保存网页中所有图片的方法
Jun 23 #Javascript
网页常用特效代码整理
Jun 23 #Javascript
You might like
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
js获取url传值的方法
2015/12/18 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
tensorflow实现简单的卷积神经网络
2018/05/24 Python
python实现爬取图书封面
2018/07/05 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python 使用多属性来进行排序
2019/09/01 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
int和Integer有什么区别
2013/05/25 面试题
国际商务英语专业求职信
2014/07/08 职场文书
就业协议书范本
2014/10/08 职场文书
小学体育教学随笔
2015/08/14 职场文书
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技