首頁 > 開發者 > JavaScript

JavaScript仿靜態分頁實現方法，javascript靜態

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

JavaScript仿靜態分頁實現方法，javascript靜態

本文執行個體講述了JavaScript仿靜態分頁實現方法。分享給大家供大家參考。具體如下：

這裡基於JavaScript模仿網頁不重新整理靜態分頁的功能，實際用的時候估計要做些改動，因為目前需要分頁的內容是作為一個字串變數存在JS裡，使用時這裡的資料要變為資料庫中讀取的資料，不知道它的實用性有多高，需要的朋友慢慢調整一下。

運行效果如所示：

具體代碼如下：

<HTML><HEAD><TITLE> 靜態分頁</TITLE><style>* {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>header<div id="divPagenation"></div><div id="divContent"></div>footer<SCRIPT LANGUAGE="JavaScript"><!--s="<p>jquery SimpleModal Ajax彈出對話方塊外掛程式，擁有簡潔風格的網頁彈出層外掛程式，風格設計比較簡約大方，可彈出圖片、彈出含有HTML代碼的div對話方塊等，類似的效果已有很多，請根據自己的需要採用吧。。jquery SimpleModal Ajax彈出對話方塊外掛程式，擁有簡潔風格的網頁彈出層外掛程式，風格設計比較簡約大方，可彈出圖片、彈出含有HTML代碼的div對話方塊等，類似的效果已有很多，請根據自己的需要採用吧。</p>";function DHTMLpagenation(content) { with (this){this.content=content;this.contentLength=content.length;this.pageSizeCount;this.perpageLength=100;this.currentPage=1;this.regularExp=/\d+/;this.divDisplayContent;this.contentStyle=null;this.strDisplayContent="";this.divDisplayPagenation;this.strDisplayPagenation="";arguments.length==2?perpageLength=arguments[1]:'';try {divExecuteTime=document.createElement("DIV");document.body.appendChild(divExecuteTime);}catch(e){}if(document.getElementById("divContent")){divDisplayContent=document.getElementById("divContent");}else{try{divDisplayContent=document.createElement("DIV");divDisplayContent.id="divContent";document.body.appendChild(divDisplayContent);}catch(e){return false;}}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;}}DHTMLpagenation.initialize();return this;}};DHTMLpagenation.initialize=function() { with (this){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() { with (this){strDisplayPagenation="分頁：";if(currentPage&&currentPage!=1)strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一頁</a>  ';elsestrDisplayPagenation+="上一頁  ";for(var i=1;i<=pageSizeCount;i++){if(i!=currentPage)strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>  ';elsestrDisplayPagenation+=i+"  ";}if(currentPage&&currentPage!=pageSizeCount)strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一頁</a>  ';elsestrDisplayPagenation+="下一頁  ";strDisplayPagenation+="共 " + pageSizeCount + " 頁，每頁" + perpageLength + " 字元，調整字元數：<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='確定' onclick='DHTMLpagenation.change(document.getElementById(\"ctlPerpageLength\").value);'>";divDisplayPagenation.innerHTML=strDisplayPagenation;}};DHTMLpagenation.previous=function() { with(this){DHTMLpagenation.goto(currentPage-1);}};DHTMLpagenation.next=function() { with(this){DHTMLpagenation.goto(currentPage+1);}};DHTMLpagenation.goto=function(iCurrentPage) { with (this){startime=new Date();if(regularExp.test(iCurrentPage)){currentPage=iCurrentPage;strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);}else{alert("page parameter error!");}DHTMLpagenation.displayPage();DHTMLpagenation.displayContent();}};DHTMLpagenation.displayContent=function() { with (this){divDisplayContent.innerHTML=strDisplayContent;}};DHTMLpagenation.change=function(iPerpageLength) { with(this){if(regularExp.test(iPerpageLength)){DHTMLpagenation.perpageLength=iPerpageLength;DHTMLpagenation.currentPage=1;DHTMLpagenation.initialize();}else{alert("請輸入數字");}}};DHTMLpagenation(s,100);//--></SCRIPT></BODY></HTML>

希望本文所述對大家的javascript程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More