客户端静态页面玩分页


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 15 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 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 生成随机验证码图片代码
2010/02/08 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
Python内置数据类型详解
2014/08/18 Python
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
二年级数学教学反思
2014/01/21 职场文书
消防应急演练方案
2014/02/12 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
考试保密承诺书
2014/08/30 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
create-react-app开发常用配置教程
2022/06/25 Javascript