js控制:div 超过高度,自动分页

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>根据div高度判断分页的代码</title>
6 <style type="text/css">
7 #frameContent{
8 width:605px;/*调整显示区的宽*/
9 height:400px;/*调整显示区的高*/
10 font-size:12px;
11 line-height:23px;
12 border:1px solid #000000;
13 overflow-pageINdex:hidden;
14 overflow-y:hidden;
15 word-break:break-all;
16 }
17 #pages a{
18 font-size:12px;
19 color:#000000;
20 text-decoration:underline;
21 }
22 #pages a:hover{
23 font-size:12px;
24 color:#CC0000;
25 text-decoration:underline;
26 }
27 </style>
28 </head>
29
30 <body>
31 <div id="frameContent">
32 <p>  有一种现象,稍留心些就发现:老年人中,很多只剩下一位女的,男人比女人要早许多年就过世。</p>
33 <p>  我们到晚年,不管年纪多大,也不管身体状态怎么样,只要有老公始终陪着你,就算活到八十,活到九十,活到一百,你也不会感到凄凉和孤独。</p>
34 <p>  即使到了暮年,夫妻相伴,白天一起看电视看报纸听收音机,一起旅游一起到好朋友家喝茶聊天,一起到花园和草坪散步,那份快乐,那份自得,其实,是多少儿女都无法替代的。也是任何人都无法替代的。</p>
35 <p>  更何况,现在的人,大多也只能有一个孩子?</p>
36 <p>  按一般人的认识,男人比女人坚强,女人生儿育女,肯定身体不如男人。可是,为什么许多老人,大多都是老公撇下老妻先走了呢?</p>
37 <p>  其实,男人,并非像女人以为的那样坚强。他们的坚强,是因为他们把人生遇到的所有屈辱,失落,挫败,病痛,沮丧,生活的压力和人生的沉重,全都隐忍在自己心中,不肯说出来,不肯表现出来罢了。</p>
38 <p>  而所有的这些隐忍在心的情绪,其实,全都像一个又一个的“电脑病毒”积累到最后,结果就是崩盘,死机。</p>
39 <p>  男人为什么会醺酒?为什么会抽烟?为什么会沉思?</p>
40 <p>  更多的原因,其实,是他心理已经积存了太多的病毒。就因为他是男人,他不能轻易流泪,更不能轻易向人诉说。他必得在妻子,在儿女,在父母面前做出硬汉子的形象。</p>
41 <p>  而女人,却习惯哪怕一点点的委屈,都会向丈夫,向父母,向姐妹们,向好友倾诉出来,女人病毒不会积存。她会在每一次的倾诉和泪水中,清理皆净。</p>
42 <p>  而人类,几乎所有的疾病,更多的原因就是郁积出来的。所以,情绪爱喧泄出来的女人,往往往寿命长久。而男人,却早于妻子离开人世。</p>
43 <p>  怎么样才能让老公尽可能活得更长久,尽可能陪你到老?</p>
44 <p>  从现在做起,立即行动!</p>
45 <p>  那么,你该着手做些什么事?</p>
46 <p>  一,当老公回到家中,尽可能给他营造一个温馨轻松的环境。其实,没有重要客人来访,干嘛一定非要把地拖得一尘不染?衣服干嘛非要当时就洗?为什么一定要把本该在家中休闲放松的时间,弄得两人都紧紧张张的?而夫妻两口,磨嘴的时候,多是家务。</p>
47 <p>  二,当老公在外面不快时,即使他不说,你也要尽可能去察觉,一面用爱心关怀他,给他做个下酒菜,倒一杯酒,讲些幽默的段子,先转移他的不快,接着慢慢寻问。</p>
48 <p>  如果他不想告诉你,甚至不想提及,你一定不要再继续打听。他一定是受了很重的内伤,此时,男人是习惯自己舔伤口的。你能做的是一个字:爱!体贴!温柔!这虽不一定能排解他的内心的郁积和伤口,但一定会是止痛剂和消炎药。</p>
49 <p>  如果他肯说了,那么,不管他说出来的是什么事,你都不能在此时抱怨他了。你能做的,就是开导和疏导他转移不良情绪。</p>
50 <p>  其实,他的所有不快,说穿了,决不会超过“名利”二字的范围。</p>
51 <p>  再则就是和人起了争执,受了领导的指责。</p>
52 <p>  如果,你最在意的是老公的健康,是老公能陪你到老,你就不该最在意丈夫的名利,命中该有的终须会有,没有的,挣死,也来不了。硬撑着挣来的,还会失去。不在这方面失去,必会在另一方面失去。这是铁定的规律。</p>
53 <p>  你如果不在意了,丈夫会活得十分轻松。这种轻松,恰恰会成就你们得到许多惊喜!</p>
54 <p>  三,酒不可过量。酒场上逞英雄的,其实大家表面夸他,转脸都会当他是傻瓜。烟,如果实在断不了,尽可能不要吸劣质烟,但一定说服他少吸烟。</p>
55 <p>  四,如果必须得和年老的婆母同住,没有条件和并不年老的婆母分开居住,你就一定要接受现实,尽量和婆母搞好关系。因为,你容不下丈夫的母亲,你们的矛盾,你们的每一场战争,都必会减弱丈夫数月一年甚至几年的寿命。反过来,他如果天天和你母亲不和吵闹,你该怎么办?压抑而无奈又夹在板中的你,肯定一样也会减寿的。</p>
56 <p>  好,这到以上四点,下面的就容易多了:</p>
57 <p>  你要是爱你丈夫,就不要多弄那些煎炸烹炒的食物给他吃。这个不能由着他的性子。多做一些素菜和凉拌菜。要像哄孩子那样哄他吃这些。</p>
58 <p>  当他吃完这些清淡的素菜之后,他也会发觉,过去那种老吃油水大的煎炸食物后,莫名其妙的头昏脑涨,无精打彩和昏昏欲睡等等说不出原因的不良状态,会骤然改善。</p>
59 <p>  你要是想丈夫陪你到老,你要和尽可能让丈夫参回有氧活动。跑步,快走,打球,旅行,爬山,打拳,哪怕没有条件,在屋内活动一下筋骨,地板上打几个滚,都一样能起到锻炼的目的。</p>
60 <p>  你要想你丈夫陪你到生命的尽头,你就要关护他像关护孩子一样。只要你是真爱他那个人的,而没有太多的附加条件,你一定乐意试试。</p>
61 <p>  你这样做了,你会发现,他会活得很开心,会活得很热烈,会活得很有成就感,会活得很健康,他一定会回报你的。那是你始料不及的。</p>
62 <p>  即使他很普通,但他一定是真爱你的,他也一定不会先走,他会一直陪着你,活得很久很久,一直陪你到生命的尽头。</p>
63 <p>  姐妹们,当我们老到白发苍苍时,当我们老到腿脚酸疼时,当我们老到腰弯,可是,只要有老公陪在身边,你会知道,千万资产,也不如一个陪了你一生一世的老公为你端来一杯热茶,数来几片药片。</p>
64 <p>  当我们老到满脸皱纹时,多少昂贵的礼服和化妆品,也不如老公轻轻地挽着你的胳臂走在夕阳的草丛中。</p>
65 <p>  当我们老得只能在摇椅里甚至轮椅里摇啊推时,你会发觉,什么豪宅权威功名,也抵不上夜半变天时,老公为你加打开电热毯和一声问侯。</p>
66 <p>  为什么要从现在做起而不是将来?</p>
67 <p>  因为,一棵树,越早矫正,它就直得越早。老公也如此,越早注意对他的关爱,他的身心就会一直健康,即使有了病毒,也会被你的爱及时清除,而不至于积留到未来。</p>
68 <p>  你能做到这些,能使他的身心得到健康的同时,因为你们是一起生活的,所以,你自己也必将快乐和健康。在督促他进取的同时,你也必将懂得努力修炼,增加自己的核心竞争力。</p>
69 </div>
70
71 <div id="pages" style="font-size:12px; width:605px; line-height:40px; text-align:center;"></div>
72 <script language="javascript">
73 var obj = document.getElementById("frameContent"); //获取内容层
74 var pages = document.getElementById("pages"); //获取翻页层
75 var pgindex=1; //当前页
76 window.onload = function() //重写窗体加载的事件
77 {
78 var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));//获取页面数量
79 pages.innerHTML = "<b>共"+allpages+"页</b> "; //输出页面数量
80 for (var i=1;i<=allpages;i++){
81 pages.innerHTML += "<a href=\"javascript:showPage('"+i+"');\">第"+i+"页</a> ";
82 //循环输出第几页
83 }
84 pages.innerHTML += " <a href=\"javascript:gotopage('-1');\">上一页</a> <a href=\"javascript:gotopage('1');\">下一页</a>"
85 }
86 function gotopage(value){
87 try{
88 value=="-1"?showPage(pgindex-1):showPage(pgindex+1);
89 }catch(e){
90
91 }
92 }
93 function showPage(pageINdex)
94 {
95
96 obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight); //根据高度,输出指定的页
97 pgindex=pageINdex;
98 }
99 </script>
100 </body>
101 </html>
102

 

转载于:https://www.cnblogs.com/wifi/archive/2012/01/11/2319171.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现js的打印功能并自动分页,可以通过以下步骤进行操作: 1. 首先,在页面上创建一个打印按钮,并给该按钮添加一个点击事件监听器。 2. 在点击事件的回调函数中,获取需要打印的内容,并将其分成适当的分页。 3. 使用js的`print()`方法打印每一页内容。 4. 在分页之前,可以通过`window.innerWidth`和`window.innerHeight`获取当前窗口的尺寸,以便确定每一页高度。 5. 对需要打印的内容进行遍历,并根据每一页高度内容分成不同的页面。 6. 使用css的@media print媒体查询来控制打印样式,例如设置页面居中、隐藏不需要打印的元素等。 下面是一个简单的示例代码: ```html <button id="printBtn">打印</button> <div id="content"> <!--要打印的内容--> </div> <script> document.getElementById('printBtn').addEventListener('click', function() { var content = document.getElementById('content').innerHTML; var pages = paginateContent(content); // 分页处理 printPages(pages); // 打印每一页内容 }); function paginateContent(content) { var pageHeight = window.innerHeight; // 每一页高度 var pages = []; var startIndex = 0; while (startIndex < content.length) { var endIndex = startIndex + pageHeight; pages.push(content.substring(startIndex, endIndex)); startIndex = endIndex; } return pages; } function printPages(pages) { var printWindow = window.open('', '', 'width=800, height=600'); printWindow.document.write('<html><head><title>打印</title></head><body>'); for (var i = 0; i < pages.length; i++) { printWindow.document.write('<div class="page">' + pages[i] + '</div><p style="page-break-after: always;"></p>'); } printWindow.document.write('</body></html>'); printWindow.document.close(); printWindow.print(); } </script> ``` 通过上述代码,我们可以实现在页面上点击按钮后,将内容进行自动分页,并打印每一页内容

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值