JS实现文章内容根据字数或标签翻页

来源:互联网 发布:机器人赛道编程 编辑:程序博客网 时间:2024/05/29 16:13

 根据文章内容字数或特定的翻页标签(默认为[NEWPAGE]),自动生成翻页链接;

// JavaScript Documentfunction GESPager(){    // client static html file pagenation    this.contDiv=document.getElementById('memcontent');    this.content=this.contDiv.innerHTML;    this.contentLength=content.length;this.divPager = document.getElementById('contpager');    this.pageSizeCount=1;    this.perpageLength=300;//default perpage by length.     this.currentPage=1;    this.regularExp=/\d+/;//this.regularExp=/.+[\?\&]{1}page=(\d+)/;     this.divContentArray=new Array();    this.strDisplayContent="";    this.strDisplayPagenation="";        arguments.length==2?perpageLength=arguments[1]:'';            GESPager.initialize();    return this;};GESPager.initialize=function (){    if(contentLength<=perpageLength)    {        strDisplayContent=content;        contDiv.innerHTML=strDisplayContent;        return null;    }    var contentArr=new Array();    var contentArrTemp=new Array();    if(content.toUpperCase().indexOf("[NEWPAGE]")>0)    {        contentArrTemp=content.split("[NEWPAGE]");        pageSizeCount=contentArrTemp.length;var pct = 0;        for(i=0;i<pageSizeCount;i++){pct++;if(contentArrTemp[i].length == 0){ i++; }contentArr[pct]=contentArrTemp[i];        }pageSizeCount = pct;    }     else      {    re=/<table[^>]*>[\s\S]*?<\/table>|<div[^>]*>[\s\S]*?<\/div>|<p[^>]*>[\s\S]*?<\/p>|.*/ig;                 contentArray=content.match(re);        var str="",contemp="";        for(i=0;i<contentArray.length;i++){contemp = contentArray[i];if(contemp.length == 0){continue;}            if(str.length<=perpageLength)            {                str+=contemp;            }            else            {                contentArr[pageSizeCount]=str;                str=contemp;                pageSizeCount++;            }        }        contentArr[pageSizeCount]=str;    }    divContentArray=contentArr;    GESPager.goto(currentPage);    GESPager.displayContent();     }; GESPager.displayPage=function (){if(pageSizeCount > 1){strDisplayPagenation="";     //if(currentPage&¤tPage!=1) //strDisplayPagenation+='<a href="javascript:void(0);" onclick="GESPager.previous()">上一页</a>  ';     //else  //strDisplayPagenation+="上一页  ";for(var i=1;i<=pageSizeCount;i++) {if(i!=currentPage)strDisplayPagenation+='<a href="javascript:void(0);" onclick="GESPager.goto('+i+');">'+i+'</a>  ';elsestrDisplayPagenation+='<a href="javascript:void(0);" class="currpage">'+i+'</a>  ';}//if(currentPage&¤tPage!=pageSizeCount)//strDisplayPagenation+='<a href="javascript:void(0)" onclick="GESPager.next()">下一页</a>  ';//else//strDisplayPagenation+="下一页  ";if(currentPage < pageSizeCount)strDisplayPagenation += '<a href="javascript:void(0);" onclick="GESPager.showrest();">余下全文</a>';divPager.innerHTML=strDisplayPagenation;divPager.style.display = "block";}};GESPager.showrest = function() {strDisplayContent = "";for(var i = currentPage + 1;i<=pageSizeCount;i++){strDisplayContent += divContentArray[i];}GESPager.displayContent();divPager.innerHTML = '<a href="javascript:void(0);" onclick="GESPager.goto(' + currentPage + ');">分页显示</a>';};GESPager.showall = function() {strDisplayContent = content.replace(/\[NEWPAGE\]/ig, "");GESPager.displayContent();divPager.innerHTML = '<a href="javascript:void(0);" onclick="GESPager.goto(' + currentPage + ');">分页显示</a>';};GESPager.previous=function (){    GESPager.goto(currentPage-1);};GESPager.next=function (){    GESPager.goto(currentPage+1);};GESPager.goto=function (iCurrentPage){    startime=new Date();    if(regularExp.test(iCurrentPage))    {        currentPage=iCurrentPage;        strDisplayContent=divContentArray[currentPage];    }    else    {        alert("page parameter error!");    }    GESPager.displayPage();    GESPager.displayContent();};GESPager.displayContent=function (){    contDiv.innerHTML=strDisplayContent;};GESPager.change=function (iPerpageLength){    if(regularExp.test(iPerpageLength))    {        GESPager.perpageLength=iPerpageLength;        GESPager.currentPage=1;        GESPager.initialize();    }    else    {        alert("请输入数字");    }};// GESPager(strContent,perpageLength)

链接CSS:

#contpager{font-size:12px;text-align:center;word-wrap:break-word;clear:both;padding:0 12px 10px; display:none;}#contpager a{display:inline-block;text-decoration:none;line-height:18px;padding:2px 8px;margin:5px 4px 5px 0;background-color:#fff;border:1px solid #009ad9;text-align:center;}#contpager a:visited{color:#1f3a87}#contpager a:hover{color:#fff;background-color:#009ad9;}#contpager a.currpage{font-weight:bold;border:1px solid #009ad9;background-color:#009ad9;color:#fff;padding:2px 7px;}#contpager a.currpage:visited{color:#fff;}

效果图:



 使用方法:

1、文章内容必须包含在ID为memcontent的容器中;

2、翻页链接容器ID为contpager;

3、在Body结束标签前调用<script language="javascript">GESPager();</script>即可;

DEMO

原创粉丝点击