js的大文章分页

最新推荐文章于 2018-12-29 17:35:42 发布
最新推荐文章于 2018-12-29 17:35:42 发布
阅读量724 收藏 1
点赞数
分类专栏： JAVASCRIPT 文章标签： function javascript html input div button

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<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&&currentPage!=1)
strDisplayPagenation+='<a href="javascript:void(0)" οnclick="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)" οnclick="DHTMLpagenation.goto('+i+');">'+i+'</a>&nbsp;&nbsp;';
else
strDisplayPagenation+=i+"&nbsp;&nbsp;";
}
if(currentPage&&currentPage!=pageSizeCount)
strDisplayPagenation+='<a href="javascript:void(0)" οnclick="DHTMLpagenation.next()">下一页</a>&nbsp;&nbsp;';
else
strDisplayPagenation+="下一页&nbsp;&nbsp;";
strDisplayPagenation+="共 " + pageSizeCount + " 页，每页" + perpageLength + " 字符，调整字符数：<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='确定' οnclick='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>

一个简单的JS实现的长文章分页
03-30
NULL 博文链接：https://crazyhe.iteye.com/blog/1327941
用JS对长文章进行分页
faunjoe的专栏
07-02 556
New Document * {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;}hea
JavaScript用层实现长文章分页
Hern（宋兆恒）
12-29 1758
<html> <head> <style type="text/css"> #frameContent{ width:500px; /*调整显示区的宽*/ height:200px; /*调整显示区的高*/ font-size:14px; line-height:20px; border:1px solid #000...
js实现的长文章自动分页。
xuStanly的专栏
10-07 1732
New Document * {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;}hea
js对文章内容进行分页示例代码
10-26
通过这个示例，我们可以看到，实现一个基本的文章分页功能实际上并不复杂，关键在于正确获取和使用元素的高度属性，以及合理地设置滚动位置，以确保用户体验的流畅性和页面的整洁性。 现在，我们已经了解了...
Wordpress实现单篇文章分页显示的方法
09-29
以下是如何在不依赖插件的情况下，通过编辑WordPress核心文件实现单篇文章分页显示的方法。 首先，我们需要在`wp-includes/js/quicktags.js`文件中添加新的编辑器按钮。在找到的`ed_buttons`数组中，我们插入用于...
wordpress 文章分页 实用的wordpress长文章分页代码
09-29
因此，合理的文章分页是提升网站性能和用户体验的重要手段。 在WordPress中，实现文章分页通常有两种方法，一种是通过在文章编辑器中手动插入分页符，另一种是通过代码实现自动分页。 首先，手动插入分页符的方法...
纯JS长文章分页代码
01-03
本代码提供了一个较为完整的纯JavaScript文章分页解决方案，涵盖了基本的参数配置、内容获取、分页处理以及简单的页面渲染逻辑。开发者可以根据具体需求对参数和功能进行调整和扩展，例如增加更多样式的导航按钮、...
分页js文件
05-11
在网页开发中，分页是一种常见的用户界面设计技术，它用于处理大量的数据并将其分割成易于管理的...通过合理的JavaScript编程和CSS样式设计，我们可以创建出高效、美观且易用的分页系统，极大地提升网站的用户体验。
jQuery实现长文章分页
lz610756247的专栏
12-25 4375
首先，在开头定义Css样式 <style> #page-box{ text-align: center; } </style> html中对应的部分为 <div id="content-box"> {$content} 这里就是文章内容了，通常都是很多的&l...
长文章分页
我行我能
11-30 691
#jiax{width:80%;/*调整显示区的宽*/height:200px;/*调整显示区的高*/font-size:14px;line-height:180%;border:1px solid #000000;overflow-x:hidden;overflow-y:hidden;word-break:break-all;}a{font-size:12px;color:#000000;tex
使用js对文章内容进行分页
Brady_never
03-04 1354
Thinkphp中文章显示代码： {$article.content|htmlspecialchars_decode} js实现代码：     var obj = document.getElementById("showContent");     var pages= document.getElementById("articlePages");     //ale
实现长文章HTML分页源码
不以己悲的博客
09-13 7365
文章分页特效
我认为一个还算不错的长文章分页类
我的编程笔记
08-27 1029
/**长文章分页类*author tdweb@GGT*date 2008-8-4*$content 要拆分的文章内容*/Class cutContent{    public $content;    public $limit;    public $length;    public $pageCount;    public $no
JavaScript实现长文章分页
"JavaScript实现的长文章分页代码示例" 在网页开发中，当文章内容过长时，为了提高用户体验，通常会采用分页的方式来显示内容。这个资源提供的就是一个用JavaScript实现的文章分页代码。JavaScript是一种轻量级的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值