纯JS长文章分页代码

最新推荐文章于 2018-12-29 17:35:42 发布
最新推荐文章于 2018-12-29 17:35:42 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： JavaScript

如果只有一页，则不显示分页

<TABLE cellSpacing=1 cellPadding=5 width="95%" align=center
border=0>
<TBODY>
<TR>
<TD>

<DIV id=article></DIV><xml id=xmlArticle>
<Article>
<Info>
<Content>
<![CDATA[
大家来试验分页哦~~~~~[NextPage]我分~~~[NextPage]我再分[NextPage]分分分
]]>
</Content>
</Info>
</Article>
</xml>
<!--正文分页Js-->
<SCRIPT language=Javascript>
<!--
//每页显示字数
PageSize=1000;
//分页模式
flag=1;//1:根据字数自动分页 2:根据[NextPage]分页
//默认页
startpage = 1;
//导航显示样式 0:常规 1:直接 3:下拉
TopShowStyle = 1;
DownShowStyle = 0;

var currentSet,CutFlag,TotalByte,PageCount,key,tempText,tempPage;
key="";
currentSet=0;
var Text=xmlArticle.selectSingleNode("//Content").text;
TotalByte=Text.length;

if (flag==1)
{
   PageCount=Math.round(TotalByte/PageSize);
   if(parseFloat("0."+TotalByte%PageSize)>0){
    if(parseFloat("0."+TotalByte%PageSize)<0.5){
     PageCount=PageCount+1;
     }
   }
   var PageNum=new Array(PageCount+1);
   var PageTitle=new Array(PageCount+1);
   PageNum[0]=0;
   PageTitle[0]="";
  
   var sDrv1,sDrv2,sDrv3,sDrv4,sFlag;
   var sDrvL,sTemL;
   var sTem1,sTem2,k;
   sFlag=0;
  
   for(j=1;j<PageCount+1;j++){
    PageNum[j]=PageNum[j-1]+PageSize;
    PageTitle[j]="";
    //alert(j);
    sDrv1="<br>";
    sDrv2="<BR>";
    sDrv3="<Br>";
    sDrv4="<bR>";
    sDrvL=sDrv1.length;
    for(k=PageNum[j];k<=TotalByte;k++){
     sTem1=Text.substring(PageNum[j]-sDrvL,k);
     sTemL=sTem1.length;
     sTem2=sTem1.substring(sTemL-sDrvL,sTemL)
     if (sTem2==sDrv1 || sTem2==sDrv2 || sTem2==sDrv3 || sTem2==sDrv4)
     {
      sFlag=sFlag+1;
      PageNum[j]=k;
      break;
     }
    }
    if (PageNum[j]>TotalByte)
    {
     break;
    }
   }
   if (j<PageCount)
   {
    PageNum.length=j;
    PageCount=j
   }
   if (PageCount>1&&sFlag>1&&PageCount<sFlag)
   {
    PageCount=sFlag+1;
   }
}


function text_pagination(Page){
   var Output,Byte;

   if(Page==null){Page=1;}

   Output="";
   Output=Output+"<table width=100% height=30 border=0 align=center cellpadding=0 cellspacing=0>";
   Output=Output+"<tr>";
   Output=Output+"<td height=1 background=Images/DotLine.gif></td>";
   Output=Output+"</tr>";

   //头部功能导航条
   Output=Output+"<tr>";

    //正文查找
  
  
    Output=Output+"<td align=right>";

    //页码显示方式一
    //第x页：分页标题
    if (Page==0 || PageCount==0){
     Output=Output+"当前是：<font color=red>全文显示</font>" ;   
    }
    else{
     if(TotalByte>PageSize){Byte=PageNum[Page]-PageNum[Page-1]}else{Byte=TotalByte};
  if(TotalByte>PageSize){
     Output=Output+"第 <font color=red>"+Page+"</font> 页";}
     if (PageTitle[Page]!="")
     {
      Output=Output+"：<font color=800000>"+PageTitle[Page]+"</font>";
     }
     Output+='&nbsp;';
    }

    //显示方式二
    //下拉菜单选择
    //if (PageCount>0)
    //{
    // Output=Output+Article_PageNav(2,Page);
    // Output=Output+"&nbsp;</td>";
    //}

    //显示方式三
    //页码选择列表
    //Output=Output+"<td align=right bgcolor=#f0faff>";
    //Output=Output+Article_PageNav(0,Page);
    //Output=Output+"</td>";

   Output=Output+"</tr>";
   Output=Output+"<tr>";
   Output=Output+"<td height=1 background=Images/DotLine.gif></td>";
   Output=Output+"</tr>";
   Output=Output+"</table>";

   //显示正文
   if(Page==0) {
   //不分页
    tempText=Text;
   }
   else{
   //分页
    if (flag==1)
    //自动分页
    {
     tempText=Text.substring(PageNum[Page-1],PageNum[Page]);
    }
    else{
    //手动分页
     if (PageTitle[Page-1].length==0)
     {
      tempText=Text.substring(PageNum[Page-1]+10,PageNum[Page]);
     }
     else{
      tempText=Text.substring(PageNum[Page-1]+11+PageTitle[Page-1].length,PageNum[Page]);
     }
    }
   }
 
   //布置内容
   Output=Output+"<div align=center>";
   Output=Output+Article_PageNav(TopShowStyle,Page);
   Output=Output+"</div>";
 
   Output=Output+"<div id=world>";
   Output=Output+tempText;
   Output=Output+"</div>";
   Output=Output+"<br>";

   Output=Output+"<div align=center>";
   Output=Output+Article_PageNav(DownShowStyle,Page);
   Output=Output+"</div>";
 
   article.innerHTML = Output;
   if (Page>1)
   {
    document.location.href='#top';
   }
 
   eval_r(document.all.keys).value=key;
   if (key!=""){searchkey();}
}


function Article_PageNav(ShowStyle,Page){
//分页码显示函数
//参数为调用样式，0=简单样式，1=标准样式
   var temp="";

   if (ShowStyle==0)
   //简单样式
   {
    tempPage=Page;
    if(TotalByte>PageSize){
     if (Page-4<=1){
      temp=temp+"<font face=webdings color=#999999>9</font>";
      if (Page<=1){temp=temp+"<font face=webdings color=#999999>7</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page-1)+")><font face=webdings>7</font></a>";}
      if (PageCount>10){
       for(i=1;i<8;i++){
        if (i==Page){
         temp=temp+"<font color=red>"+i+"</font> ";
        }else{
         temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
        }
       }
      temp=temp+" ...";
      }
      else{
       for(i=1;i<PageCount+1;i++){
        if (i==Page){
         temp=temp+"<font color=red>"+i+"</font> ";
        }
        else{
         temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
        }
       }
      }

      if (Page==PageCount){temp=temp+"<font face=webdings color=#999999>8</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page+1)+")><font face=webdings>8</font></a>";}
      if(PageCount<10){temp=temp+"<font face=webdings color=#999999>:</font>";}else{temp=temp+"<a href=javascript:text_pagination("+PageCount+")><font face=webdings>:</font></a>";}
     }
     else if(Page+4<=PageCount){
     temp=temp+"<a href=javascript:text_pagination(1)><font face=webdings>9</font></a>";
     temp=temp+"<a href=javascript:text_pagination("+(Page-1)+")><font face=webdings>7</font></a>";
      if (PageCount>10){
       temp=temp+"..";
       for(i=Page-4;i<Page+4;i++){
        if (i==Page){
         temp=temp+"<font color=red>"+i+"</font> ";
        }
        else{
        temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
        }
       }

       temp=temp+" ..";
      }
      else{
       for(i=1;i<PageCount+1;i++){
        if (i==Page){
         temp=temp+"<font color=red>"+i+"</font> ";
        }
        else{
        temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
        }
       }
      }
  
      if (Page==PageCount){temp=temp+"<font face=webdings color=#999999>8</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page+1)+")><font face=webdings>8</font></a>";}
      temp=temp+"<a href=javascript:text_pagination("+PageCount+")><font face=webdings>:</font></a>";

     }
     else{
      temp=temp+"<a href=javascript:text_pagination(1)><font face=webdings>9</font></a>";
      temp=temp+"<a href=javascript:text_pagination("+(Page-1)+")><font face=webdings>7</font></a>";
      temp=temp+".."

      for(i=Page-2;i<PageCount+1;i++){
       if (i==Page){
        temp=temp+"<font color=red>"+i+"</font> ";
       }
       else{
        temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
       }
      }

      if (Page==PageCount){temp=temp+"<font face=webdings color=#999999>8</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page+1)+")><font face=webdings>8</font></a>";}
      temp=temp+"<font face=webdings color=#999999>:</font>";
     }
    }
    else{
  if(TotalByte>PageSize)
  {
   temp=temp+"<font color=red>1</font> ";
  }
    }
 if(TotalByte>PageSize)
 {
  temp=temp+" <a href=javascript:text_pagination(0)>显示全部</a>"
 }
   }
   else if (ShowStyle==1)
   //标准样式
   {
    if(TotalByte>PageSize){if(Page!=0){if(Page!=1){temp=temp+"<a href='#top' οnclick=javascript:text_pagination("+(Page-1)+")><font color=3366cc>[上一页]</font></a>&nbsp;&nbsp;";}}}
    for (i=1;i<PageCount+1 ;i++ )
    {
     if (Page==i)
     {
   if(Page!=PageCount){
        temp=temp+"<font color=800000>["+i+"]</font>&nbsp;&nbsp;";
   }
     }
     else{
      temp=temp+"<a href='#top' οnclick=javascript:text_pagination("+i+")><font color=3366cc>["+i+"]</font></a>&nbsp;&nbsp;";
     }
    }
    temp=temp+"<a name='foot'></a>";
    if(TotalByte>PageSize){if(Page!=0){if(Page!=PageCount){temp=temp+"<a href='#top' οnclick=javascript:text_pagination("+(Page+1)+")><font color=3366cc>[下一页]</font></a>  <a href=javascript:text_pagination(0)><font color=3366cc>显示全部</font></a>";}}}

   }
  

   return (temp);
}

//默认页
text_pagination(startpage);
//-->
</SCRIPT>

</TD></TD></TR></TBODY></TABLE></TD></TR>
</TBODY></TABLE>

Star_0304
关注
专栏目录
用JS对长文章进行分页
faunjoe的专栏
07-02 542
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实现的长文章分页
03-30
NULL 博文链接：https://crazyhe.iteye.com/blog/1327941
JavaScript用层实现长文章分页
Hern（宋兆恒）
12-29 1738
<html> <head> <style type="text/css"> #frameContent{ width:500px; /*调整显示区的宽*/ height:200px; /*调整显示区的高*/ font-size:14px; line-height:20px; border:1px solid #000...
js实现的长文章自动分页。
weixin_34416649的博客
08-19 132
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt; New Document &lt;/TITLE&gt;&lt;META NAME="Generator" CONTENT="EditPlus"&
长文章分页显示
zhkchi的专栏
12-09 243
protected void Page_Load(object sender, EventArgs e) { string str = "两年多的坚持推动最终换来圆满的结果，民众期盼已久的成都赴台湾包机将于12月19日首度实现直航。据悉，成都市作为此次协议签署中大陆新开放的16个客运包机直航城市、8个邮件封发局之一，空运直航和直接通邮的实现，势必将翻开成都台湾两地全...
wordpress 文章分页 实用的wordpress长文章分页代码
09-29
在WordPress中，实现文章分页通常有两种方法，一种是通过在文章编辑器中手动插入分页符，另一种是通过代码实现自动分页。 首先，手动插入分页符的方法较为简单。用户可以在文章编辑器切换到HTML模式，并在希望分割...
js对文章内容进行分页示例代码
10-26
通过这个示例，我们可以看到，实现一个基本的文章分页功能实际上并不复杂，关键在于正确获取和使用元素的高度属性，以及合理地设置滚动位置，以确保用户体验的流畅性和页面的整洁性。 现在，我们已经了解了...
纯js分页代码(简洁实用)
10-26
本篇文章将详细介绍一个纯JavaScript编写的简洁实用的分页代码，适合那些需要在项目中实现分页功能的开发者参考。 首先，我们需要了解分页的基本原理。分页通常分为两种模式：一种是根据内容的字数自动分页，另一种...
PHP实现长文章分页实例代码(附源码)
01-21
当文章内容比较长，为了更好的满足用户体验度，我们将文章内容分页显示处理，而一般分页处理是在后台发布文章的时候就将提交的内容生成多个分页后的静态文件。通过本文结合实例采用php动态将长文章内容进行分页处理...
内容页分页代码
weixin_34273479的博客
01-13 140
在使用Thinkphp开发的内容管理系统里面，很多东西都要自己开发，内容分页当然也是要自己开发的，下面是我根据查资料自己整理的方法:1、首先是在后台编辑内容的时候需要插入分页符，不同的编辑器分页符自然也不同了2、然后就是读取文章内容的时候，要根据分页符来把内容分割成多个数组然，这里需要传值当前是第几页，根据页数来读取分割后的数组代码如下：<php> $ar...
js 控制文章长篇内容分页
b9264826的博客
05-25 166
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jsPageLocation.aspx.cs" Inherits="jsPageLocation" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w...
javascript长文章分页代码
xinyi128108的博客
01-15 284
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;m
使用PHP将长文章分页
LanceLive
09-24 710
当文章内容特长时，为了方便阅读和页面展示我们一般将内容分页来显示。而一般分页处理是在后台发布文章的时候就将提交的内容生成多个分页后的静态文件。本文我们结合实例来讲解采用PHP动态将长文章内容进行分页处理。 查看演示 下载源码 如何分页 手动分页：一般在编辑内容时加入特殊分页标记，如{pages}，提交后，PHP程序会根据分页符处理分页，生成不同的静态页面。这种分页方法分页准确，但
长文章手动分页显示代码
Cason2014的专栏
04-24 136
　　项目过程中遇到一篇文章篇幅很长，下拉查看非常不便， 此方法实现长文章的手动分页，在后台添加内容过程中，我以“|”作为分页的标志， 1、webConfig中的设置。 <appSettings> <add key="PagerSplit" value="|"/> </appSettings> 当然你也可以设置其他字符作为分页...
js的大文章分页
银狐的专栏
09-13 711
js 文章分页
JavaScript实现长文章分页
"JavaScript实现的长文章分页代码示例" 在网页开发中，当文章内容过长时，为了提高用户体验，通常会采用分页的方式来显示内容。这个资源提供的就是一个用JavaScript实现的文章分页代码。JavaScript是一种轻量级的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值