<!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>
效果圖：
