zoukankan      html  css  js  c++  java
  • html页面内容分页【转】

          上网看新闻或是资料时,经常看到有些文章内容分页。非常好奇其实现方法。今天在网上淘到一个非常棒的用javasript给页面内容分页的例子。看下效果吧   :
    下面是代码,大家可以研究一些,非常不错的javascript代码:
      1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      2<html>
      3<head>
      4    <title>New Document </title>
      5    <meta name="Generator" content="EditPlus" />
      6    <meta name="Author" content="" />
      7    <meta name="Keywords" content="" />
      8    <meta name="Description" content="" />
      9    <style type="text/css">
     10{
     11font-size:10.2pt;
     12font-family:tahoma;
     13line-height:150%;
     14}

     15.divContent
     16{
     17border:1px solid red;
     18background-color:#FFD2D3;
     19width:500px;
     20word-break:break-all;
     21margin:10px 0px 10px;
     22padding:10px;
     23}

     24
    </style>
     25</head>
     26<body>
     27    <span>header</span>
     28    
     29    <div id="divContent">
     30    </div>
     31    <div id="divPagenation">
     32    </div>
     33    <span>footer</span>
     34
     35    <script language="JavaScript" type="text/javascript">
     36<!--
     37s="<p>女老师竭力向孩子们证明,学习好功课的重要性。<ul><li>aaa</li><li>bbb</li></ul> </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>";
     38
     39function DHTMLpagenation(content)
     40{
     41     with (this)
     42      {
     43        // client static html file pagenation
     44
     45        this.content=content;
     46        this.contentLength=content.length;
     47        this.pageSizeCount;
     48        this.perpageLength=100//default perpage byte length.
     49        this.currentPage=1;
     50        //this.regularExp=/.+[\?\&]{1}page=(\d+)/;
     51        this.regularExp=/\d+/;
     52
     53        this.divDisplayContent;
     54        this.contentStyle=null;
     55        this.strDisplayContent="";
     56        this.divDisplayPagenation;
     57        this.strDisplayPagenation="";
     58
     59        arguments.length==2?perpageLength=arguments[1]:'';
     60
     61        try {
     62            divExecuteTime=document.createElement("DIV");
     63            document.body.appendChild(divExecuteTime);
     64        }

     65        catch(e)
     66        {
     67        }

     68        if(document.getElementById("divContent"))
     69        {
     70             divDisplayContent=document.getElementById("divContent");
     71        }

     72        else
     73        {
     74            try
     75            {
     76                divDisplayContent=document.createElement("DIV");
     77                divDisplayContent.id="divContent";
     78                document.body.appendChild(divDisplayContent);
     79            }

     80            catch(e)
     81            {
     82                 return false;
     83            }

     84        }

     85
     86        if(document.getElementById("divPagenation"))
     87        {
     88            divDisplayPagenation=document.getElementById("divPagenation");
     89        }

     90        else
     91        {
     92            try
     93            {
     94                divDisplayPagenation=document.createElement("DIV");
     95                divDisplayPagenation.id="divPagenation";
     96                document.body.appendChild(divDisplayPagenation);
     97            }

     98            catch(e)
     99            {
    100                return false;
    101            }

    102        }

    103
    104        DHTMLpagenation.initialize();
    105        return this;
    106
    107    }

    108}
    ;
    109
    110DHTMLpagenation.initialize=function() 
    111
    112    with (this)
    113    {
    114        divDisplayContent.className=contentStyle!=null?contentStyle:"divContent";
    115        if(contentLength<=perpageLength)
    116        {
    117            strDisplayContent=content;
    118            divDisplayContent.innerHTML=strDisplayContent;
    119            return null;
    120        }

    121
    122        pageSizeCount=Math.ceil((contentLength/perpageLength));
    123
    124        DHTMLpagenation.goto(currentPage);
    125        DHTMLpagenation.displayContent();
    126    }

    127}
    ;
    128
    129DHTMLpagenation.displayPage=function()
    130{
    131    with (this)
    132    {
    133        strDisplayPagenation="分页:";
    134
    135        if(currentPage&&currentPage!=1)
    136            strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页</a>&nbsp;&nbsp;';
    137        else
    138            strDisplayPagenation+="上一页&nbsp;&nbsp;";
    139
    140        for(var i=1;i<=pageSizeCount;i++)
    141        {
    142            if(i!=currentPage)
    143                strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>&nbsp;&nbsp;';
    144            else
    145                strDisplayPagenation+=i+"&nbsp;&nbsp;";
    146        }

    147
    148        if(currentPage&&currentPage!=pageSizeCount)
    149            strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>&nbsp;&nbsp;';
    150        else
    151            strDisplayPagenation+="下一页&nbsp;&nbsp;";
    152
    153        strDisplayPagenation+="共 " + pageSizeCount + " 页,每页" + perpageLength + " 字符,调整字符数:<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='确定' onclick='DHTMLpagenation.change(document.getElementById(\"ctlPerpageLength\").value);'>";
    154
    155        divDisplayPagenation.innerHTML=strDisplayPagenation;
    156    }

    157}
    ;
    158DHTMLpagenation.previous=function() 
    159{
    160    with(this)
    161    {
    162        DHTMLpagenation.goto(currentPage-1);
    163    }

    164}
    ;
    165DHTMLpagenation.next=function() 
    166
    167    with(this)
    168    {
    169        DHTMLpagenation.goto(currentPage+1);
    170    }

    171}
    ;
    172DHTMLpagenation.goto=function(iCurrentPage) 
    173
    174    with (this)
    175    {
    176        startime=new Date();
    177        if(regularExp.test(iCurrentPage))
    178        {
    179            currentPage=iCurrentPage;
    180            strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);
    181        }

    182        else
    183        {
    184            alert("page parameter error!");
    185        }

    186        DHTMLpagenation.displayPage();
    187        DHTMLpagenation.displayContent();
    188    }

    189}
    ;
    190DHTMLpagenation.displayContent=function() 
    191
    192    with (this)
    193    {
    194        divDisplayContent.innerHTML=strDisplayContent;
    195    }

    196}
    ;
    197DHTMLpagenation.change=function(iPerpageLength) 
    198
    199    with(this)
    200    {
    201        if(regularExp.test(iPerpageLength))
    202        {
    203            DHTMLpagenation.perpageLength=iPerpageLength;
    204            DHTMLpagenation.currentPage=1;
    205            DHTMLpagenation.initialize();
    206        }

    207        else
    208        {
    209            alert("请输入数字");
    210        }

    211    }

    212}
    ;
    213
    214// method
    215// DHTMLpagenation(strContent,perpageLength)
    216
    217DHTMLpagenation(s,100);
    218
    219//-->
    220    
    </script>
    221
    222</body>
    223</html>
    224
  • 相关阅读:
    分治与线段树
    PAT甲级 1006
    PAT甲级 1001
    单源最短路 Dijkstra
    图的邻接矩阵与邻接表
    Huffman树 建树方法代码实现
    小根堆模板类
    二叉搜索树的搜索和插入与删除算法优化
    完全二叉树模板
    二叉树模板及二叉树的无递归遍历
  • 原文地址:https://www.cnblogs.com/xpengfee/p/761587.html
Copyright © 2011-2022 走看看