客户端静态页面玩分页


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 相关文章推荐
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
原生js实现放大镜特效
Mar 08 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
使用JS实现简易计算器
Jun 14 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
php foreach正序倒序输出示例代码
2014/07/01 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
php unlink()函数使用教程
2018/07/12 PHP
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
2015年出纳年终工作总结
2015/05/14 职场文书
建国大业观后感600字
2015/06/01 职场文书
素质拓展训练感想
2015/08/07 职场文书
nginx日志格式分析和修改
2022/04/28 Servers