`

javascript &css实现的长文章分页

JavaScriptCSS正则表达式.netHTML 
阅读更多

 

 

 

javascript &css实现的长文章分页

 

转自：http://blog.csdn.net/sinbas/archive/2010/02/23/5319273.aspx

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
<HEAD>  
<TITLE>FLYSO Blog-- JS代码实现的自动分页效果~!</TITLE>  
<META NAME="Generator" CONTENT="EditPlus">  
<META NAME="Author" CONTENT="">  
<META NAME="Keywords" CONTENT="">  
<META NAME="Description" CONTENT="">  
<mce: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;  
}  
--></mce:style><style mce_bogus="1">* {  
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>";  
// 封装DHTMLpagenation  
function DHTMLpagenation(content) { with (this)  
{  
// client static html file pagenation  
// Scipit by blueDestiny,never-online, www.never-online.net  
this.content=content; // 内容  
this.contentLength=content.length; // 内容长度  
this.pageSizeCount; // 总页数  
this.perpageLength=100; //default perpage byte length.  
this.currentPage=1; // 起始页为第1页  
//this.regularExp=/.+[\?\&]{1}page=(\d+)/;  
this.regularExp=/\d+/; // 建立正则表达式，匹配数字型字符串。  
this.divDisplayContent;  
this.contentStyle=null;  
this.strDisplayContent="";  
this.divDisplayPagenation;  
this.strDisplayPagenation="";  
// 把第二个参数赋给perpageLength;  
arguments.length==2?perpageLength=arguments[1]:'';  
try {  
divExecuteTime=document.createElement("DIV");  
document.body.appendChild(divExecuteTime);  
}  
catch(e)  
{  
}  
// 得到divPagenation容器。  
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;  
}  
}  
// 得到divContent容器  
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;  
}  
}  
DHTMLpagenation.initialize();  
return this;  
}};  
//初始化分页；  
//包括把加入CSS，检查是否需要分页  
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&&currentPage!=1)  
strDisplayPagenation+='<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页</a>&nbsp;&nbsp;';  
else  
strDisplayPagenation+="上一页&nbsp;&nbsp;";  
for(var i=1;i<=pageSizeCount;i++)  
{  
if(i!=currentPage)  
strDisplayPagenation+='<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>&nbsp;&nbsp;';  
else  
strDisplayPagenation+=i+"&nbsp;&nbsp;";  
}  
if(currentPage&&currentPage!=pageSizeCount)  
strDisplayPagenation+='<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>&nbsp;&nbsp;';  
else  
strDisplayPagenation+="下一页&nbsp;&nbsp;";  
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("请输入数字");  
}  
}};  
// 接口API  
// DHTMLpagenation(strContent[,perpageLength])  
DHTMLpagenation(s,100);  
// Power By blueDestiny,never-online  
//-->  
</SCRIPT>  
</BODY>  
</HTML> 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/sinbas/archive/2010/02/23/5319273.aspx

分享到：
| IL代码--.net的CLR的中间语言
评论
发表评论

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

相关推荐

    JavaScript&JQuery&CSS&CSS等等DIV实例大全.zip

    JavaScript，jQuery，CSS以及CSS3是网页开发中的核心技术，它们共同构建了丰富的用户体验和美观的网页设计。这个压缩包文件“JavaScript&JQuery&CSS&CSS等等DIV实例大全.zip”显然是一个包含各种示例和教程的集合，...

    原生js + css实现分页

    本项目是利用原生JavaScript（JS）和层叠样式表（CSS）来实现这种功能，无需依赖任何外部库或框架。下面将详细探讨如何使用这两种技术来创建一个功能完备的分页组件。 首先，我们要理解分页的基本结构。通常，分页...

    一个简单的JS实现的长文章分页

    标题 "一个简单的JS实现的长文章分页" 涉及到的是JavaScript编程中的一个常见功能，即在网页上处理大量文本内容时如何通过分页提高用户体验。在Web开发中，尤其是在内容丰富的博客、论坛或者新闻网站中，长篇文章...

    ASP长文章分页功能实现方法 手动 自动两种

    本文将详细介绍如何在ASP中实现手动和自动两种长文章分页功能。 **手动分页** 手动分页主要是通过编程逻辑来控制每一页显示的内容数量。以下是一个简单的步骤： 1. **计算总页数**：首先，你需要获取文章的总字数...

    JavaScript+CSS共25种分页样式

    里面含有25种分页样式,每种样式都是当前最前沿的样式,总有适合你的一款.

    jQuery分页插件结合CSS3实现个性分页代码特效

    在网页开发中，分页是一种常见的功能，用于处理大量数据的显示，比如博客文章列表、电商产品列表等。本教程将深入探讨如何使用jQuery分页插件与CSS3技术，来创建具有独特视觉效果的个性化分页代码特效。 首先，...

    前端分页css与js

    本资源提供的`pagination.css`和`pagination.js`是实现前端分页的两个关键文件，分别用于样式控制和逻辑处理。 **CSS在前端分页中的作用** `pagination.css`文件主要负责分页组件的样式设计。在前端，CSS（层叠...

    Jquery+css分页式滑动

    本文将详细介绍如何利用jQuery和CSS技术实现这种分页式滑动效果，以提升用户体验，同时确保在各种浏览器上的兼容性。 ### 1. jQuery基础 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画以及...

    CSS3实现3D分页导航按钮.zip

    在本项目中，“CSS3实现3D分页导航按钮.zip”是一个包含JavaScript特效，特别是针对菜单导航的资源。这个分页导航系统利用了CSS3的强大功能，为用户提供了一种新颖且视觉吸引力强的分页体验。以下是关于CSS3 3D分页...

    一个非常精巧的javascript实现的Bootstrap分页插件

    Bootstrap的分页组件是其内置的一种UI元素，用于处理长内容的分页显示，但原始的Bootstrap分页组件可能需要配合其他库（如jQuery）来实现动态功能。 这个JavaScript实现的Bootstrap分页插件则直接在纯JavaScript...

    100套css3分页效果

    本文将详细讲解"100套css3分页效果"这一主题，探讨如何利用CSS3实现各种美观且实用的分页样式，以及这些效果对不同浏览器的支持情况。 首先，CSS3的引入为网页设计带来了许多新特性，如伪类选择器、渐变、阴影、...

    基于 HTML5 & CSS3 实现翻书效果

    3. 初始化插件：使用JavaScript调用Turn.js，指定书籍的大小、边距、分页方式等参数。 4. 配置事件：可以添加事件监听器，处理用户翻页时触发的事件，例如翻页完成或翻页过程中。 例如，以下是一个简单的使用Turn....

    网页超长文章自动分页

    根据提供的信息，我们可以深入探讨网页超长文章自动分页的相关技术细节与实现方法。自动分页功能对于提高用户体验、优化页面加载性能具有重要意义。接下来，将详细解释如何在网页上实现这一功能，并涵盖相关的HTML、...

    精选多款DIV+CSS分页样式源码

    本资源包“精选多款DIV+CSS分页样式源码”聚焦于使用HTML的`&lt;div&gt;`标签配合CSS样式来实现各种美观且功能完备的分页效果。以下将详细介绍这个主题中的关键知识点。 1. **DIV标签**：在HTML中，`&lt;div&gt;`（division）是...

    JS分页控件+CSS样式

    本文将详细介绍JavaScript（JS）实现的分页控件及其与CSS样式的结合应用。 一、JS分页控件的基本原理 JS分页控件主要是通过JavaScript来动态生成分页按钮，并处理用户点击分页按钮时的事件，以实现页面内容的切换。...

    25种分页css样式

    4. **纯CSS分页**：这些例子可能使用伪类（如`:hover`, `:active`, `:focus`）和Flexbox或Grid布局来实现无JavaScript的分页功能。这样可以提高页面加载速度，同时对搜索引擎友好。 5. **自定义形状和图标**：CSS...

    文章正文分页实现源码

    本文将深入探讨如何实现文章正文的分页功能，包括其原理、方法和一些最佳实践。 首先，我们要理解文章正文分页的逻辑。通常，分页是基于字符数、单词数或可视行数来进行的。开发者需要设定一个阈值，当文章内容超过...

    css,html漂亮的分页代码

    在网页设计中，分页是一种常见的功能，用于处理大量数据的显示，比如博客文章列表、电商产品列表等。本主题将深入探讨如何使用HTML和CSS来实现美观且实用的分页代码。 首先，HTML（HyperText Markup Language）是...

    24种页面分页样式(带css)

    在网页设计中，分页是不可或缺的一个元素，它帮助用户浏览和导航长内容列表，如博客文章、产品目录或搜索结果。"24种页面分页样式(带css)" 提供了丰富的设计模板，旨在提升用户体验，同时也为开发者提供直接修改和...

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