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流 ...

随机推荐

scipy优化器optimizer
#optimazer优化器 from scipy.optimize import minimize def rosem(x): return sum(100.0*(x[1:]-x[:-1])**2.0 ...
__add__运行过程
BZOJ3420[POI2013]Triumphal arch&BZOJ5174[Jsoi2013]哈利波特与死亡圣器——树形DP+二分答案
题目大意: 给一颗树,1号节点已经被染黑,其余是白的,两个人轮流操作,一开始B在1号节点,A选择k个点染黑,然后B走一步,如果B能走到A没染的节点则B胜,否则当A染完全部的点时,A胜.求能让A获胜的最 ...
MT【232】展开式中的系数
$(1+x+x^2+\cdots+x^{100})^3$展开式中$x^{150}$前的系数为_____ 解答:$(1+x+x^2+\cdots+x^{100})^3=(1-x^{101})^3\sum ...
FFT/NTT总结+洛谷P3803 【模板】多项式乘法（FFT）（FFT/NTT）
前言众所周知,这两个东西都是用来算多项式乘法的. 对于这种常人思维难以理解的东西,就少些理解,多背板子吧! 因此只总结一下思路和代码,什么概念和推式子就靠巨佬们吧推荐自为风月马前卒巨佬的概念和定理 ...
LOJ #2802. 「CCC 2018」平衡树(整除分块 + dp)
题面 LOJ #2802. 「CCC 2018」平衡树题面有点难看...请认真阅读理解题意. 转化后就是,给你一个数 $N$ ,每次选择一个 $k \in [2, N]$ 将 $N$ 变 ...
Python的双向链表实现
思路链表由节点组成,先规定节点(Node),包含data和指向下个节点的next 初始化 data当然就是传入的data了,next和prev指向None 添加分两种情况: 链表为空,那么头节点和 ...
【BZOJ1879】[SDOI2009]Bill的挑战（动态规划）
[BZOJ1879][SDOI2009]Bill的挑战(动态规划) 题面 BZOJ 洛谷题解本来还想着容斥来着,这个数据范围直接暴力就好.设$f[i][S]$表示当前填到了第$i$位,和\ ...
打开SharePoint 2013 web application显示iis 欢迎页面
当我打开SP web application时,页面显示如下: 查看event log,发现有一些8315-8317之类的error,发现把request management service停掉后, ...
gcc编译器命令使用详解
1.gcc包含的c/c++编译器gcc,cc,c++,g++,gcc和cc是一样的,c++和g++是一样的,(没有看太明白前面这半句是什么意思:))一般c程序就用gcc编译,c++程序就用g++编译 ...

js 将很长的内容进行页面分页显示

js 将很长的内容进行页面分页显示的更多相关文章

随机推荐

热门专题