`

客户端静态页面玩分页

HTML.net 
阅读更多 

<!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>



详细出处参考：http://www.jb51.net/article/134.htm
分享到：
| 图片之间的切换
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    客户端静态页面玩分页.rar

    "客户端静态页面玩分页.rar"这个压缩包文件可能包含了一些关于如何在JavaScript环境下实现分页效果的示例或代码资源。"JS特效-翻牌页角"标签暗示了这个分页实现可能采用了独特的视觉效果，即翻牌页角，这种设计通常...

    生成静态页面并分页生成静态页面并分页

    在IT行业中，生成静态页面和实现分页是网站优化与性能提升的重要技术手段。静态页面主要指的是HTML文件，它们在服务器端生成后直接发送给客户端，无需每次请求时都执行服务器端的脚本，从而降低了服务器负担，提升了...

    自己整理的一些网站常用JS效果1

    2.7种js脚本分页代码.html 3.CSS分页放大效果.html 4.CSS分页符代码.html ...10.仿豆瓣分页原型.html 11.给放大的分页.html ...18.客户端静态页面玩分页.html 19.泪流满面404.html 20.类似QQ提示打开或者复制网址.html

    静态页面js分页实例

    在网页开发中，分页是一种常见的用户界面设计技术，它用于将大量数据分割成小块，以便用户可以逐步浏览和处理。...通过实践和理解上述知识点，你可以创建出高效且用户体验优秀的静态页面分页功能。

    Asp.NET生成静态页面并分页

    在生成静态页面的同时结合分页，我们需要考虑如何保存和处理每一页的数据。一种方法是为每一页生成单独的静态文件，文件名可以包含页码信息，如`products_page_1.html`，`products_page_2.html`等。另一种方法是将...

    vb.net 生成静态页面列表分页

    在VB.NET编程环境中，生成静态页面列表分页是一项常见的任务，尤其在构建大型网站或Web应用程序时，为了提高页面加载速度和减轻服务器负担，通常会选择将动态内容转换为静态HTML页面。下面我们将深入探讨如何使用VB...

    ASP.NET生成静态页面和分页

    现在，让我们深入探讨ASP.NET如何实现静态页面生成和分页功能。 **一、ASP.NET生成静态页面** 1. **预编译**：ASP.NET 提供了预编译功能，可以将ASPX页面转换为编译后的DLL文件，减少运行时的解析时间。这虽然不是...

    生成静态页面和分页主要的原理

    生成静态页面和分页主要的原理是通过动态网站技术将数据和HTML模板结合，最终输出为独立的HTML文件，提供给用户快速访问。这一过程涉及的主要技术包括服务器端脚本语言（如PHP、ASP.NET、JSP等）、模板引擎以及...

    生成静态页面并有分页效果

    本项目以"生成静态页面并有分页效果"为主题，我们可以深入探讨这一主题的相关知识点。 首先，生成静态页面通常涉及的技术包括静态站点生成器（Static Site Generator, SSG）。SSG可以从Markdown、YAML或者其他的...

    httpclient,freemarker的静态化分页

    7. **配置URL**：设置URL重写规则，使用户访问动态URL时实际上加载的是对应的静态页面。 项目中已经提供了封装好的工具类，简化了这个过程，包含文档可以帮助理解具体用法。使用这些工具类，开发者可以快速实现静态...

    C#分页和生产静态页面

    本话题主要探讨了两个关键概念：C#中的分页技术和生成静态页面。这两种技术在构建高效、用户友好的Web应用程序时非常关键。 首先，我们来详细讨论C#分页。在大型数据集展示中，分页是必不可少的，它可以帮助提高...

    jQuery纯静态页面分页（带数据库）

    总结来说，使用jQuery实现静态页面分页涉及客户端与服务器端的协同工作，包括用户交互处理、Ajax请求、JSON数据交换以及DOM操作。结合Visual Studio和SQL Server，可以构建一个高效、友好的分页系统。虽然这个例子...

    asp.net实现静态页面分页显示

    在ASP.NET中，静态页面分页显示是一种常见的需求，它能帮助用户更高效地浏览大量数据，提升用户体验。实现这一功能的关键在于理解如何利用服务器端技术动态生成看似静态的HTML页面，同时结合分页控件和数据库查询...

    php分页类包括动态和静态

    本文将深入探讨PHP实现分页的动态和静态方式，包括静态页面、伪静态页面以及动态分页类的实现原理和方法。 一、静态分页 静态分页通常适用于数据量较小，更新不频繁的场景。在这种情况下，可以预先计算好每个页面的...

    静态分页

    与之相对的是动态分页，它是在用户请求时，服务器根据参数动态查询数据库并生成页面内容，再返回给客户端。动态分页灵活性高，但可能会增加服务器的计算压力，特别是在高并发情况下。 在“freemarkerpage”这个...

    velocity生成静态网页并分页

    实际应用中，这些静态页面会被保存在服务器的指定目录下，以便直接向客户端发送，而无需每次都动态生成。 总的来说，"velocity生成静态网页并分页"的项目展示了如何结合Velocity模板引擎和分页技术来创建高效的Web...

    静态页面生成加分页实例

    在IT行业中，静态页面生成和分页是两个重要的概念，特别是在构建高性能、高访问量的网站时。静态页面生成能够显著提升网站的加载速度和搜索引擎优化（SEO），而分页则是处理大量数据展示的关键技术。下面我们将深入...

Magicbox
Global site tag (gtag.js) - Google Analytics