js 将很长的内容进行页面分页显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>页面分页</title>
<style type="text/css">
*
{
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> <h1>标题</h1>
<div id="divPagenation">
</div>
<div id="divContent">
</div> <script type="text/javascript"> s="<p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><img src='/login/image/password.png' /><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，<img src='/login/image/password3.png' />有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </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>"; //对img标签进行匹配
var imgReg = /(<img\s+src='\S+'\s*(\/)?>)/gi;
matchContent = s.match(imgReg);
imgContent = s;
if(imgReg.test(s))
{
//将img标签替换为*
imgContent = s.replace(imgReg,"*");
} // 封装DHTMLpagenation
function DHTMLpagenation(content)
{ this.content=content; // 内容
this.contentLength=imgContent.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 {
//创建要显示的DIV
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
{
//创建每页显示内容的消息的DIV
divDisplayContent=document.createElement("DIV");
divDisplayContent.id="divContent";
document.body.appendChild(divDisplayContent);
}
catch(e)
{
return false;
}
} DHTMLpagenation.initialize();
return this; }; //初始化分页；
//包括把加入CSS，检查是否需要分页
DHTMLpagenation.initialize=function()
{ 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()
{ strDisplayPagenation="分页："; if(currentPage && currentPage !=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 && currentPage!=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()' />"; divDisplayPagenation.innerHTML=strDisplayPagenation; }; //上一页
DHTMLpagenation.previous=function()
{
DHTMLpagenation.goto(currentPage-1);
}; //下一页
DHTMLpagenation.next=function()
{ DHTMLpagenation.goto(currentPage+1);
}; //跳转至某一页
DHTMLpagenation.goto=function(iCurrentPage)
{
startime=new Date();
if(regularExp.test(iCurrentPage))
{
currentPage=iCurrentPage; var tempContent = ""; //获取当前的内容 里面包含 *
var currentContent = imgContent.substr((currentPage-1)*perpageLength,perpageLength); tempContent = currentContent; //当前页是否有 * 获取最后一个 * 的位置
var indexOf = currentContent.indexOf("*"); if(indexOf >= 0)
{
//获取从开始位置到当前页位置的内容
var beginToEndContent = imgContent.substr(0,currentPage*perpageLength); //获取开始到当前页位置的内容 中的 * 的最后的下标
var reCount = beginToEndContent.split("*").length - 1; var contentArray = currentContent.split("*"); tempContent = replaceStr(contentArray,reCount,matchContent); }
// else
// {
// tempContent=imgContent.substr((currentPage-1)*perpageLength,perpageLength);
// } strDisplayContent=tempContent;
}
else
{
alert("页面参数错误");
}
DHTMLpagenation.displayPage();
DHTMLpagenation.displayContent();
};
//显示当前页内容
DHTMLpagenation.displayContent=function()
{
divDisplayContent.innerHTML=strDisplayContent;
}; //改变每页的字节数
DHTMLpagenation.change=function()
{ var iPerpageLength = document.getElementById("ctlPerpageLength").value;
if(regularExp.test(iPerpageLength))
{ // DHTMLpagenation.perpageLength=iPerpageLength;
// DHTMLpagenation.currentPage=1;
// DHTMLpagenation.initialize(); DHTMLpagenation(s,iPerpageLength);
}
else
{
alert("请输入数字");
}
}; /* currentArray:当前页以 * 分割后的数组
replaceCount:从开始内容到当前页的内容 * 的个数
matchArray ： img标签的匹配的内容
*/
function replaceStr(currentArray,replaceCount,matchArray)
{ var result = "";
for(var i=currentArray.length -1,j = replaceCount-1 ;i>=1; i--)
{ var temp = (matchArray[j] + currentArray[i]); result = temp + result; j--;
} result = currentArray[0] + result ; return result;
} DHTMLpagenation(s,100); </script> </body>
</html>
效果图：
js 将很长的内容进行页面分页显示的更多相关文章
- 多页的TIFF图片在aspx页面分页显示
一.逻辑实现:将数据库中的二进制TIFF图片读出并分页显示在页面上. 1.显示界面 public FrameDimension MyGuid; ; ; public static MemoryStre ...
- JSP页面分页显示数据
效果如上图所示!最多显示10条:完整jsp和后台代码如下: <%@ page contentType="text/html;charset=UTF-8" %> < ...
- 在easyui-tabs中的href或 content的多种条件下的不同页面内容和页面地址的赋值?
$('#tt').tabs('add', {.....});中 的 加载内容, 可以用content, 或用 href都是可以的. 虽然它们加载 的方式不一样, 但是 只要是加载进去后, 加载成功后, ...
- 如果内容很长ueditor编辑辑器怎么出现滚动条
在开发网站的时候,有的页面需要加载ueditor编辑器,如果内容很长,默认设置的时候编辑器会根据内容拉长,而不是页面出现滚动条,如果拖动页面滚条,会比较麻烦,要拖动很长才能看到提交按钮. 如何才能让编 ...
- 转载一篇比较详细的讲解html,css的一篇文章，很长
转载自这里,转载请注明出处. DIV+CSS系统学习笔记回顾 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 ...
- 解决使用vue打包时vendor文件过大或者是app.js文件很大的问题
这篇文章主要介绍了使用vue打包时vendor文件过大或者是app.js文件很大问题的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 第一次使用vue2.0开发,之前都是用的angu ...
- 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果
Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...
- 专访黄勇：Java在未来的很长一段时间仍是主流（把老板当情人，把同事当小孩，把客户当病人）
url:http://www.csdn.net/article/2015-09-06/2825621 2015-09-06 13:18 摘要:本文采访了现任阿里巴巴公司系统架构师黄勇,从事近十年的Ja ...
- ZK中使用JS读取客户端txt文件内容问题
最近写一个需求时遇到一个问题,用户需要通过点击一个按钮直接读取他自己电脑上D盘的一个txt文件内容显示到页面,因为项目现在是用ZK写的.我对于ZK也是刚刚了解不就,很多都还不是很熟.起初我是想用io流 ...
随机推荐
- 关于flask 上直接使用py.test测试框架进行测试
这个周末基本上都在研究这玩意儿中度过了,虽然效率不高,英文文档看得晕头转向,但是好歹弄出来了 有个结果测试也通过了现在粗略总结一下有时间补上更多详细的例子. 首先使用py.test测试框架,可以做最简 ...
- (一) 关于配置travis-ci持续集成python pytest测试的相关记录
首先由于公司用上了高大上的travis-ci商用版,一直想试着学学弄弄看.现在要写openapi的相关测试,而且要在travis-ci上集成.我就想体验一下这个过程.所以自己弄了一个public的仓库 ...
- spring学习总结(一)_Ioc基础(下)
本篇文章继续上篇文章讲解Ioc基础,这篇文章主要介绍零配置实现ioc,现在相信大家项目中也基本都是没有了xml配置文件.废话不多说.一起学习 代码示例 BookDao.java package com ...
- LinkedList 实现 Queue
package cn.com.example; import java.util.LinkedList; /** * Created by Jack on 2017/3/8. */ public cl ...
- [Caffe]:关于*** Aborted at 1479432790 (unix time) try "date -d @1479432790" 错误的另一种原因
问题:设置solver.prototxt时,lr_policy:"step",运行时出现下面问题 *** Aborted at (unix time) try "date ...
- List泛型集合
List和数组 相同点: 都可以控制元素类型 不同点: List的长度是可变的,所以list比数组更容易掌控 List属性 1.Count 获取集合中实际包含的元素个数 2.Capcity 集合中可以 ...
- VMware vCenter 6.0 安装及群集配置介绍
一.介绍 VMware vCenter Server 提供了一个可伸缩.可扩展的平台,为虚拟化管理奠定了基础.可集中管理VMware vSphere环境,与其他管理平台相比,极大地提高了 IT 管理员 ...
- MT【21】任意基底下的距离公式
解析: 评:$\theta=90^0$时就是正交基底下(即直角坐标系下)的距离公式.
- LOJ #6270. 数据结构板子题 (离线+树状数组)
题意 有 \(n\) 个区间,第 \(i\) 个区间是 \([l_i,r_i]\) ,它的长度是 \(r_i-l_i\) . 有 \(q\) 个询问,每个询问给定 \(L,R,K\) ,询问被 \([ ...
- Java 实现金额转换 代码示例
金额转换,阿拉伯数字的金额转换成中国传统的形式如: (￥1011)→(壹仟零壹拾壹元整)输出. 分析: 金额转换,在开发财务相关软件时会经常用到,也是软件本地化的一个需要.一般开发公司或者团队都有相应 ...