一个兼容FF的智能超长文章分页JS_javascript技巧

这个是从网上找的,FF下不显示.
思路:根据p,div,table把文章分段存入数组,然后循环判断显示内容的长度是否超过定义的每页显示字符数,不超过加上下一个数组的内容,直到不符合条件为止.

<title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <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> header <div id="divPagenation"></div> <div id="divContent"></div> <div id="Content" style="display: none;"> <p><strong>人民日报7月24日报道</strong>  近一个月来，全党同志都在认真学习胡锦涛总书记在中央党校的重要讲话。大家深刻体会到，这一重要讲话意蕴深远，内涵丰富，强调的都是事关党和国家发展全局的战略性问题，都是事关中国特色社会主义长远发展的关键性问题，为党的十七大胜利召开奠定了重要的政治、思想和理论基础，对于全党统一思想，提高认识，推进党和国家的各项工作具有十分重要的意义。</p> <p>党和国家发展的经验表明，每当我们处在新的重要时刻、面临新的历史使命之时，科学地分析和判断形势，对于我们从世界和时代的发展坐标上，准确认识我们国家的发展方位，制定正确的方针政策，对于团结全党和全国人民共同奋斗，都是十分重要的。深入学习胡锦涛总书记的重要讲话，就要更好地把思想统一到讲话对形势的科学判断上来，就要充分认识我们在中国特色社会主义道路上取得的成就和面临的新形势新任务，奋力开拓中国特色社会主义事业更为广阔的发展前景。</p> <p>中国特色社会主义，是当代中国发展进步的旗帜，是全党全国各族人民团结奋斗的旗帜。新时期以来，我们从事的事业就是建设中国特色社会主义，我们取得的一切胜利都是中国特色社会主义的胜利。中国特色社会主义是科学社会主义与中国国情相结合的产物。马克思主义在中国发展的生动实践表明，马克思主义基本原理同中国具体实际紧密结合，就必定产生推动历史前进的巨大力量，中国的建设和发展就必定取得巨大成就。</p> <p>新时期２９年来，中国特色社会主义建设的成就举世瞩目。国民经济保持了持续快速健康发展，经济总量跃居世界第四位，人民生活总体上实现了小康，城乡居民收入成倍增长，国际影响显著扩大，国际地位不断提升，社会主义经济建设、政治建设、文化建设、社会建设和党的建设全面推进，中国人民的精神面貌发生了深刻变化，民族凝聚力极大增强。中国特色社会主义道路赋予我们国家和民族以强大生机，一百多年来中华民族梦寐以求的伟大复兴和现代化理想展现出灿烂的前景。在党的领导下中国人民在中国特色社会主义道路上取得的伟大的历史性成就，来之不易，彪炳史册，需要我们倍加珍惜。</p> <p>历史经验表明，新道路的开辟不可能一帆风顺，新事业的发展难免会遇到风险和挑战。我们应当看到，国际环境复杂多变，综合国力竞争日趋激烈，影响和平与发展的不稳定不确定因素日益增多，我们仍将长期面对发达国家在经济科技等方面占优势的压力。我国正处于并将长期处于社会主义初级阶段，人民日益增长的物质文化需要同落后的社会生产之间的矛盾仍然是我国社会的主要矛盾，统筹兼顾各方面利益任务艰巨而繁重，我国全面参与经济全球化面对新的机遇也面临新的挑战，工业化、城镇化、市场化、国际化深入发展形势下我国各项事业的发展面临新课题新矛盾。我国已进入改革发展的关键时期，经济体制深刻变革，社会结构深刻变动，利益格局深刻调整，思想观念深刻变化。这种空前的社会变革，给我国发展进步带来巨大活力，也必然带来这样那样的矛盾和问题。前进中的矛盾，要用辩证的眼光来看待；前进中的问题，要用发展的办法来解决。这就更加需要我们继续深化对中国特色社会主义的研究和探索，努力使中国特色社会主义道路越走越宽广。</p> <p>我国的发展站在新的历史起点上，面临的机遇前所未有，面对的挑战也前所未有。抓住机遇，迎接挑战，做好工作，关键就在于我们必须始终不渝地坚持以邓小平理论和"三个代表"重要思想为指导，深入贯彻落实科学发展观，毫不动摇地坚持和发展中国特色社会主义。让我们更加紧密地团结在以胡锦涛同志为总书记的党中央周围，坚定信念，增强信心，奋力开拓中国特色社会主义更为广阔的发展前景。</p> </div> footer <script language="JavaScript"> <!-- function DHTMLpagenation(content) { with (this) { // client static html file pagenation this.content=content; this.contentLength=content.length; this.pageSizeCount; this.perpageLength=100; //default perpage byte length. this.currentPage=1; //this.regularExp=/.+[\?\&]{1}page=(\d+)/; 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&¤tPage!=1) strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页 '; else strDisplayPagenation+="上一页 "; for(var i=1;i<=pageSizeCount;i++) { if(i!=currentPage) strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+' '; else strDisplayPagenation+=i+" "; } if(currentPage&¤tPage!=pageSizeCount) strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页 '; else strDisplayPagenation+="下一页 "; 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("请输入数字"); } }}; // method // DHTMLpagenation(strContent,perpageLength) DHTMLpagenation(document.getElementById('Content').innerHTML,200); //--> </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

为什么去掉 with(this)之后就好了?with()有什么作用哦?

===========================苗条的分割线===========================

思路:根据p,div,table把文章分段存入数组,然后循环判断显示内容的长度是否超过定义的每页显示字符数,不超过加上下一个数组的内容,直到不符合条件为止.

偶还没找到太大的bug.如果哪位达人发现了,帮偶改一下啦.先谢过

改过的代码在
偶修改的分页,可以自动识别p,div,table根据段落分页,基本做到了智能分页.
小女子正则不是很熟,写错了表打我.

<style type="text/css"> <!-- div,table,td,p{font-size:14px;} .number {color: #FF0000;font-weight: bold;margin:0 10px 0 0;} --> </style> <div id="divPagenation"> </div> <div id="divContent"></div> <div id="hidden" style="display:none;"> <span class="number">1</span>东方早报7月30日报道  近日出炉的山东2006年度审计报告显示，中国网通山东省分公司职工月人均缴存住房公积金6389元，而济南一家普通企业职工月人均缴存只有11元。政府为帮助普通职工解决住房难题而制定的政策，成了少数高收入单位为职工牟取福利的工具。 <p><span class="number">2</span>缴存比例差距最高20倍</p> <p><span class="number">3</span>报告显示，由于公积金缴存比例不统一，造成行业、群体之间收入差距拉大，缴存比例差距最高达20倍。</p> <span class="number">4</span>审计报告指出，公积金制度规定，职工和单位公积金缴存比例均不得低于职工上一年度月平均工资的5％，原则上不高于12％。审计发现，山东15个市住房公积金缴存比例大都控制在规定范围内，但有的行业或单位高于或低于规定比例，最高的达到20％，最低的只有1％。 <p><span class="number">5</span>缴存比例不统一，拉大了不同行业、不同人群之间的收入差距。审计报告披露，中国网通山东省分公司月均工资基数2.13万元，缴存比例为15％，月人均缴存6389元；而济南水箱厂月均工资基数141.2元，缴存比例为4％，月人均缴存只有11元。</p> <div> <span class="number">6</span>审计报告认为，公积金贷款投向主要集中在较高收入群体和收入稳定的机关事业单位人员。</div> <p><span class="number">7</span>公积金竟成逃税工具</p> <div> <span class="number">8</span>与审计结果相类似，全国政协委员郭松海调查发现，在同一个城市当中，最高收入职工和最低收入职工的住房公积金缴存额相差较大，有的月缴存几千元，有的只有一二十元。一些发达地区的垄断行业，以及一些效益好的单位将部分应缴税福利打入住房公积金账户，公积金不但能用来买房，还成了逃税工具。与此形成鲜明对比的是，一些真正需要购买住房的普通百姓要么没有住房公积金，要么因为缴费少、贷款难，仍然难圆安居梦。</div> <p><span class="number">9</span>住房公积金制度作为一种政策性的购房支持，应该体现出对广大中低收入家庭的关照。它不应给高收入阶层"锦上添花"，而要给中低收入阶层"雪中送炭"。在提高住房公积金覆盖率的同时，有关部门应当对在政策执行中暴露出来的问题进行疏理，改进监管制度，把缴存"限高"规定落到实处，防范企业借多缴公积金变相逃税或给职工牟取高福利的行为，充分发挥住房公积金政策在促进社会公平方面的作用。</p> <table border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr bgcolor="#FFFFFF"> <td colspan="10"><span class="number">10</span></td> </tr> <tr bgcolor="#EEEEEE"> <td width="24" valign="top">序号</td> <td width="132" valign="top">字段名</td> <td width="81" valign="top">类型</td> <td width="33" valign="top">长度</td> <td width="33" valign="top">精度</td> <td width="33" valign="top">小数位数</td> <td width="107" valign="top">默认值</td> <td width="33" valign="top">允许空</td> <td width="33" valign="top">主键</td> <td width="107" valign="top">说明</td> </tr> <tr bgcolor="#FFFFFF"> <td width="24" valign="top">1</td> <td width="132" valign="top">id</td> <td width="81" valign="top">int</td> <td width="33" valign="top">11</td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top">auto_increment</td> <td width="33" valign="top"> </td> <td width="33" valign="top">√</td> <td width="107" valign="top">栏目ID</td> </tr> <tr bgcolor="#FFFFFF"> <td width="24" valign="top">2</td> <td width="132" valign="top"> </td> <td width="81" valign="top">varchar</td> <td width="33" valign="top">200</td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top"> </td> <td width="33" valign="top">√</td> <td width="33" valign="top"> </td> <td width="107" valign="top">栏目名称</td> </tr> <tr bgcolor="#FFFFFF"> <td width="24" valign="top">3</td> <td width="132" valign="top"> </td> <td width="81" valign="top">varchar</td> <td width="33" valign="top">200</td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top"> </td> <td width="33" valign="top">√</td> <td width="33" valign="top"> </td> <td width="107" valign="top">栏目层</td> </tr> <tr bgcolor="#FFFFFF"> <td width="24" valign="top">4</td> <td width="132" valign="top"> </td> <td width="81" valign="top">int</td> <td width="33" valign="top">11</td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top">0</td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top">栏目层长度</td> </tr> <tr bgcolor="#FFFFFF"> <td width="24" valign="top">5</td> <td width="132" valign="top"> </td> <td width="81" valign="top">varchar</td> <td width="33" valign="top">200</td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top"> </td> <td width="33" valign="top">√</td> <td width="33" valign="top"> </td> <td width="107" valign="top">栏目说明</td> </tr> <tr bgcolor="#FFFFFF"> <td width="24" valign="top">6</td> <td width="132" valign="top"> </td> <td width="81" valign="top">char</td> <td width="33" valign="top">1</td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top"> </td> <td width="33" valign="top">√</td> <td width="33" valign="top"> </td> <td width="107" valign="top">删除标志</td> </tr> <tr bgcolor="#FFFFFF"> <td width="24" valign="top">7</td> <td width="132" valign="top"> </td> <td width="81" valign="top">int</td> <td width="33" valign="top">11</td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top"> </td> <td width="33" valign="top">√</td> <td width="33" valign="top"> </td> <td width="107" valign="top">顺序</td> </tr> <tr bgcolor="#FFFFFF"> <td width="24" valign="top">8</td> <td width="132" valign="top"> </td> <td width="81" valign="top">varchar</td> <td width="33" valign="top">200</td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top"> </td> <td width="33" valign="top">√</td> <td width="33" valign="top"> </td> <td width="107" valign="top"> </td> </tr> <tr bgcolor="#FFFFFF"> <td width="24" valign="top">9</td> <td width="132" valign="top"> </td> <td width="81" valign="top">text</td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top"> </td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top">权限</td> </tr> <tr bgcolor="#FFFFFF"> <td width="24" valign="top">10</td> <td width="132" valign="top"> </td> <td width="81" valign="top">varchar</td> <td width="33" valign="top">200</td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top"> </td> <td width="33" valign="top">√</td> <td width="33" valign="top"> </td> <td width="107" valign="top">站点</td> </tr> <tr bgcolor="#FFFFFF"> <td width="24" valign="top">11</td> <td width="132" valign="top"> </td> <td width="81" valign="top">char</td> <td width="33" valign="top">1</td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top"> </td> <td width="33" valign="top">√</td> <td width="33" valign="top"> </td> <td width="107" valign="top"> </td> </tr> <tr bgcolor="#FFFFFF"> <td width="24" valign="top">12</td> <td width="132" valign="top"> </td> <td width="81" valign="top"> </td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top"> </td> <td width="33" valign="top"> </td> <td width="33" valign="top"> </td> <td width="107" valign="top">类型</td> </tr> </table> <p><span class="number">11</span>据法新社２９日报道，近期，日本东京一幢公寓大楼的１８户居民先后在自家信箱中发现数额不等的现钞，面额总计１８１万日元（约合１.５万美元）。</p> <p><span class="number">12</span>据警方透露，钞票都装在普通信封内。信封没有封口，上面也没有标注任何信息。</p> <p><span class="number">13</span>大楼居民多为中产阶级。信箱中发现现钞的住户中的一些人起初以为钞票是假的，确定都是真币后，马上把这一离奇事件报告警方。</p> <span class="number">14</span>大楼住户对大楼信箱内惊现神秘现金的反应害怕多过惊喜。对于如何处理，大多数人认为，偷偷地把来路不明的钱据为己有的做法不光彩。 <p><span class="number">15</span>迄今，数额最大的是本月23日出现在古城京都一名67岁妇人家信箱中的一笔神秘现金。现金同样装在一个信封中，面值1000万日元（约合8.4万美元）。</p> <p><span class="number">16</span>从天而降</p> <p>除了在信箱中发现来路不明的现金，有人甚至遇到大笔现金"从天而降"的怪事。</p> <p><span class="number">17</span>就有96万日元（约合8000美元）从天而降，散落到一家便利店门前。但现场并没有出现混乱。一位接报后赶至现场的警察认为，其中原因是人们觉得这事太过蹊跷而不敢碰这些钱。</p> <p><span class="number">18</span>其实，日本已经出现过一轮神秘现金现身事件。日本很多市政大楼的男卫生间内出现神秘现金。现钞面额都为１万日元，随钞票还附有一封信件，上面有手书的"请用这些钱行善"等字样。</p> <p><span class="number">19</span>人们由此猜测，散留现金的人可能是公务员，希望借此振奋人心，抑或是得道高僧，号召人们多行善事。</p> </div>

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
改了一下,ie下没有p也可以分页了.不过ff出错了,回家继续改.