客户端静态页面玩分页


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 相关文章推荐
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
图片之间的切换
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 数据库树的遍历方法
2009/02/06 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
phpStorm2020 注册码
2020/09/17 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
用 JSON 处理缓存
2007/04/27 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
python中pass语句用法实例分析
2015/04/30 Python
python3抓取中文网页的方法
2015/07/28 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
银行门卫岗位职责
2013/12/29 职场文书
列车长先进事迹材料
2014/01/25 职场文书
网络书店创业计划书
2014/02/07 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
2014年党务公开方案
2014/05/08 职场文书
房屋所有权证明
2015/06/19 职场文书
httpclient调用远程接口的方法
2022/08/14 Java/Android