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

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

收藏 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

Node.js事件的正确使用方法

微信小程序自定义导航栏实例代码

js字符串处理之绝妙的代码

vue设计一个倒计时秒杀的组件详解

详解服务端预渲染之Nuxt（介绍篇）

javascrit中undefined和null的区别详解

浅谈javascript中的prototype和proto的理解

详解vue中this.$emit()的返回值是什么

浅谈express.js框架中间件（middleware）

vue自定义指令directive的使用方法

网络赚钱

站长故事

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

Node.js事件的正确使用方法

微信小程序自定义导航栏实例代码

js字符串处理之绝妙的代码

vue设计一个倒计时秒杀的组件详解

详解服务端预渲染之Nuxt（介绍篇）

javascrit中undefined和null的区别详解

浅谈javascript中的prototype和__proto__的理解

详解vue中this.$emit()的返回值是什么

浅谈express.js框架中间件（middleware）

vue自定义指令directive的使用方法

网络赚钱

站长故事

浅谈javascript中的prototype和proto的理解