一个兼容FF的智能超长文章分页JS

所属分类：网络编程 / JavaScript 阅读数： 555

收藏 0赞 0分享

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""></HEAD><BODY>header<div id="divPagenation"></div><div id="divContent"></div><div id="Content" style="display: none;"><p><strong>7月24日</strong>&nbsp;&nbsp;有人认为，人生有两大憾事：一是得不到，二是已失去。</p><p>其实，人生的道路从未有过笔直，都是弯曲的。我们总要经历无数的挫折，才能从幼稚到成熟，从失去到得到。</p><p>很多时候，我们总是在为了自己所想要的人生而疲于追逐。</p><p>有时却发现自己越在乎的事，越容易落空；越在意的人，越容易离开。</p><p>明明自己已经足够努力用心去做了，却怎么也达不成理想中的结果。</p><p>于是开始变得不安、焦虑。你的情绪不再为你自己所主宰，而是被某个人某件事所左右。</p></div>footer<SCRIPT LANGUAGE="JavaScript"></SCRIPT></BODY></HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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

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

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

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

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

<div id="divPagenation"> </div><div id="divContent"></div><div id="hidden" style="display:none;">  <span class="number">1</span>有人认为，人生有两大憾事：一是得不到，二是已失去。  <p><span class="number">2</span>其实，人生的道路从未有过笔直，都是弯曲的。我们总要经历无数的挫折，才能从幼稚到成熟，从失去到得到。</p>  <p><span class="number">3</span>很多时候，我们总是在为了自己所想要的人生而疲于追逐。</p>  <span class="number">4</span>有时却发现自己越在乎的事，越容易落空；越在意的人，越容易离开。  <p><span class="number">5</span>明明自己已经足够努力用心去做了，却怎么也达不成理想中的结果。</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">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">auto_increment</td>      <td width="33" valign="top">&nbsp;</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">&nbsp;</td>      <td width="81" valign="top">varchar</td>      <td width="33" valign="top">200</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">&nbsp;</td>      <td width="33" valign="top">√</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">栏目名称</td>    </tr>    <tr bgcolor="#FFFFFF">      <td width="24" valign="top">3</td>      <td width="132" valign="top">&nbsp;</td>      <td width="81" valign="top">varchar</td>      <td width="33" valign="top">200</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">&nbsp;</td>      <td width="33" valign="top">√</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">栏目层</td>    </tr>    <tr bgcolor="#FFFFFF">      <td width="24" valign="top">4</td>      <td width="132" valign="top">&nbsp;</td>      <td width="81" valign="top">int</td>      <td width="33" valign="top">11</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">0</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">栏目层长度</td>    </tr>    <tr bgcolor="#FFFFFF">      <td width="24" valign="top">5</td>      <td width="132" valign="top">&nbsp;</td>      <td width="81" valign="top">varchar</td>      <td width="33" valign="top">200</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">&nbsp;</td>      <td width="33" valign="top">√</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">栏目说明</td>    </tr>    <tr bgcolor="#FFFFFF">      <td width="24" valign="top">6</td>      <td width="132" valign="top">&nbsp;</td>      <td width="81" valign="top">char</td>      <td width="33" valign="top">1</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">&nbsp;</td>      <td width="33" valign="top">√</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">删除标志</td>    </tr>    <tr bgcolor="#FFFFFF">      <td width="24" valign="top">7</td>      <td width="132" valign="top">&nbsp;</td>      <td width="81" valign="top">int</td>      <td width="33" valign="top">11</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">&nbsp;</td>      <td width="33" valign="top">√</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">顺序</td>    </tr>    <tr bgcolor="#FFFFFF">      <td width="24" valign="top">8</td>      <td width="132" valign="top">&nbsp;</td>      <td width="81" valign="top">varchar</td>      <td width="33" valign="top">200</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">&nbsp;</td>      <td width="33" valign="top">√</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">&nbsp;</td>    </tr>    <tr bgcolor="#FFFFFF">      <td width="24" valign="top">9</td>      <td width="132" valign="top">&nbsp;</td>      <td width="81" valign="top">text</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">权限</td>    </tr>    <tr bgcolor="#FFFFFF">      <td width="24" valign="top">10</td>      <td width="132" valign="top">&nbsp;</td>      <td width="81" valign="top">varchar</td>      <td width="33" valign="top">200</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">&nbsp;</td>      <td width="33" valign="top">√</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">站点</td>    </tr>    <tr bgcolor="#FFFFFF">      <td width="24" valign="top">11</td>      <td width="132" valign="top">&nbsp;</td>      <td width="81" valign="top">char</td>      <td width="33" valign="top">1</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">&nbsp;</td>      <td width="33" valign="top">√</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">&nbsp;</td>    </tr>    <tr bgcolor="#FFFFFF">      <td width="24" valign="top">12</td>      <td width="132" valign="top">&nbsp;</td>      <td width="81" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="107" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</td>      <td width="33" valign="top">&nbsp;</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></div>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

改了一下,ie下没有p也可以分页了.不过ff出错了,回家继续改.

更多精彩内容其他人还在看

一个兼容FF的智能超长文章分页JS

JSONP原理及简单实现

浅析JSONP技术原理及实现

使用Web Uploader实现多文件上传

json的使用小结

非常实用的js验证框架实现源码附原理方法

js验证框架之RealyEasy验证详解

webpack中引用jquery的简单实现

JavaScript必知必会(五) eval 的使用

JavaScript必知必会(六) delete in instanceof

JavaScript必知必会(七)js对象继承

网络赚钱

站长故事

一个兼容FF的智能超长文章分页JS

JSONP原理及简单实现

浅析JSONP技术原理及实现

使用Web Uploader实现多文件上传

json的使用小结

非常实用的js验证框架实现源码 附原理方法

js验证框架之RealyEasy验证详解

webpack中引用jquery的简单实现

JavaScript必知必会(五) eval 的使用

JavaScript必知必会(六) delete in instanceof

JavaScript必知必会(七)js对象继承

网络赚钱

站长故事

非常实用的js验证框架实现源码附原理方法