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
  • 相关阅读:
    前端面试
    react 【npx createreactapp myapp】执行错误
    npm yarn安装完成后，查不到版本号
    I love cnblogs
    万万没想到VFP也可以这样硬，调用微信的硬能力，扫码、上报位置、支付都可以
    VFP为公众号添加一个报名功能，代码不多，但谁能得扬名立万
    公众号回复消息不能超过5秒，VFP大数据处理来不及怎么办？
    爆肝怒赞，不会也会了，VFPBS用Form调用webapi和文件上传
    狐友们，万万不可掉队，VFP开发企业微信第一关回调该怎么配
    十行代码完成公众号对话，VFP的能力就是这么强悍，你学会了吗?
  • 原文地址：https://www.cnblogs.com/xpengfee/p/761587.html
Copyright © 2011-2022 走看看