js 做的分页效果

AI权益加码!Claude Code、Cursor等20+工具免费用! 购周边限时加赠Coding Plan Lite,畅享主流AI工具!学习进阶更高效! 阅读详情
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
    <script type="text/javascript">
        var pageNum;
        function func() {
            var p1 = document.getElementById('txt').value; //取出文本框的值,即每页显示的字数。
            //alert(p1);            
            var o = document.getElementById('pagef'); //取出文字内容            
            var str = o.innerText;
            var l = "";
            var str1 = "";
            var pagestr = ""; //专门用于显示页码的那个div的内容  
            var page = "";
            l = str.length;//所取出的文字内容的长度
            pageNum = Math.round(l / p1);     //计算出页数                                 
            for (var i = 0; i < pageNum; i++) {
                //str1为分块显示的各页内容                
                str1 += '<div id="strpage' + i + '"';
                if (i > 0) 
                str1 += 'style="display:none"';
                str1 += '>' + str.substring(i * p1, p1 * (i + 1));
                str1 += '</div>';
                page = '<div style="width:500px; height:20px">' + pageNum + '</div>';
                pagestr += ' <a href="javascript:page(' + i + ')">第' + (i + 1) + '页</a> ';
                //alert(pagestr);
            }
            o.innerHTML = str1 + '<div>' + pagestr + '</div>';
        }
        //显示指定页        
        function page(num) {
            for (var i = 0; i < pageNum; i++)
                document.getElementById("strpage" + i).style.display = 'none';
            document.getElementById("strpage" + num).style.display = '';
        }          
    </script>
</head>
<body onload="func()">
    <form id="form1" runat="server">
    设置字数
    <input type="text" id="txt" name="txt" value="200" onchange="func(this.id)" />
    <div id="pagef" style="font-size: 14px; width: 500px; line-height: 150%; border: 1 solid red;background-color: Gray;">
        据中国之声《新闻纵横》报道,全国人大代表、武汉钢铁(集团)公司总经理邓崎琳透露,今年武
        钢准备建万头养猪场,而且年内就出栏。“钢铁侠”养猪种菜,这不是突发奇想,而是钢企向“
        非钢”转型计划的一部分。不仅如此,除了养猪,武钢还有许多设想。比如“打个电话,就可以
         代为接送幼儿园的孩子,甚至还可以帮您疏通家里堵塞的下水管”。在钢铁企业普遍微利的背景
        下,武钢今年对钢铁产业可以说是一分钱掰成两半花,却在非钢产业上重金砸下390个亿谋求发展
        。武钢“养猪”,究竟是“不务正业”还是另辟蹊径谋求转型?钢铁巨无霸——武汉钢铁公司要
        开始养猪种菜?这听起来让人觉得不可思议,但是全国人大代表、武汉钢铁(集团)公司总经理邓
        崎琳却证实确有其事,而且规模大约在一万头左右。邓崎琳:我们还准备搞的绿色养殖基地,青
        山区60万人80%都是武钢人,我的快餐一做就是上万份,不仅送到武钢,送到铁路上去,所以我们
        在武汉市周边丘林荒地买几千亩,养猪、养鸡、种菜,立体养殖、绿色养殖,发展这个产业,下
        次你买就买“武钢”牌蔬菜。本来养猪、种菜、做盒饭等第三产业都是辅助和服务性质,如今把
        这样的辅助产业做大、当成一个发展方向也是无奈之举。邓崎琳向记者解释说,受铁矿石资源短
        缺、物流成本抬高等影响,连续两年,中国钢铁生产行业年销售利润率已不到3%,远低于全国工
        业行业6%的平均利润水平。与此同时,我国钢铁产能严重过剩,按粗钢表观消费量在6.88亿吨左
        右计算,产能过剩率约已达到122%。钢铁产业现在十分困难。邓崎琳:不光今年是严冬、去年是
        严冬,至少是五年以上,钢铁工业处于一个微利和经营非常困难的境地。
    </div>
    </form>
</body>
</html>
html js html转pdf html2pdf 图片生成内容不全 阅读详情

相关推荐

JS案例】分页器——使用原生JavaScript实现

原生js实现分页器功能

m0_50785976的博客 5372

实现html 页面下载为pdf文件(html2pdf)

JS 实现web页面下载为pdf文件,无需和后台交互,解决下载清晰度问题,解决分页问题;这次开发项目时,甲方服务器没有打印机,要求加的功能,自己费了很多时间收集资料研究,最后集成的代码;方便以后使用。希望对有需要的小伙伴有帮助。

原生js实现带运动的分页效果

本例最终效果如下图,当切换页码时,本页码内所有课程将从最后一个课程开始依次运动到底部中间的位置并消失,然后新页码内的课程依次从底部中间的位置运动到原始位置。 首先实现分页效果,然后将运动和分页结合。 分页效果图如下图中的③或④所示: 下面将以 什么情况出现首页-什么情况出现上一页-五个页码不同排布情况-什么情况出现下一页-什么情况出现尾页-总页码提示-点击页码进行切换 的思路实现该分页效果。<

Della_UI的博客 2104

jspdf实现JavaScript显示pdf文档可分页

jspdf源代码jspdf源代码jspdf源代码jspdf源代码jspdf源代码jspdf源代码

html2canvas导出pdf显示不完整

解决html2canvas导出pdf显示不完整问题

fanxiangzhi的博客 3181

使用html2canvas将html转pdf,由于table表的水平和竖直有滚动条导致显示不全(或者有空白)

使用html2canvas将html转pdf,由于table表的水平和竖直有滚动条导致显示不全(或者有空白)

qq_42192641的博客 3743

html2pdf转换PDF时解决了文字被切断的问题

基本的思路 给页面内所有要转换成PDF的HTML元素添加一个class="item" , 遍历所有class="item"的HTML元素, 将它们逐个加入到pdf文档中,添加的时候计算图片高度和页面高度,如果超过另起一页。 下面直接上代码 //打印 async function printOut(title) { //打印的内容 var ele = document.querySelector('#printId'); //根据特定的class 筛选出来的List...

weixin_44077099的博客 3132

使用ul标签js分页效果

&lt;!--分页--&gt; &lt;ul class="pagination flex center" id="page"&gt;&lt;/ul&gt; js: var totalPage = page.totalPage; //总页数 var l = totalPage; if(totalPage&gt;5){ l=5; ...

qq_38779463的博客 1906

js实现分页效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #data {color: red;border: solid;text-align: cente...

weixin_30340617的博客 94

非常不错的一个JS分页效果代码,值得研究

<br />本来想用网上找来的分页程序,不过都得修改,感觉麻烦了,还是自己写一个好了,以后自己用的时候修改就方便了~~大家都多动手,自己写的才是最好的,日后想干什么的,修改也是很容易的~~顺便也扩充一下自己的代码库~~ <br />补充一句,cpage是页面计数,应为全局变量,这样可以随处调用它,totalpage是总页数 <br /><!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

上班搞IT,下班搞ITF。 1505

JavaScript小案例------js实现分页插件效果

原生js实现分页插件效果

前端叶荨,随手记 4169

vue.js 组件实现简单分页效果

前言 为了练习vue.js 之前了一个vue.js前端分页效果,后面看到vue.js组件内容,就试着把这个功能写成一个简单组件,向组件元素传递一个object参数,包含分页数据,显示的列名信息,分页信息,组件提供一个事件,传递给父元素一个分页信息,父元素拿着分页信息获取数据,修改之前的object。这样就实现了分页效果效果 知识点 components 组件 props 父级

易兒善 3万+

一个JS分页效果代码

这里分享一个不错的js分页代码。 代码中cpage是页面计数,应为全局变量,可以随处调用它; totalpage是总页数。 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原理还是相通的,感兴趣的朋友个参考吧。 例子,js分页效果代码。       JS静态分页程序--www.jbxue.com      a:link,a:visi

vip_linux的专栏 3690

JS 分页效果展示

首先是默认界面,默认首次进入页面的时候,每页展示4条数据,默认展示第一页,并把向前翻页按钮禁止掉。🏡 点击下一页按钮,可以进行翻页效果,当前页不是第一页或者最后一页时,前后翻页按钮都是可用状态。🏡 点击展示数据的按钮 可以渲染不同数量的数据在页面中。

前端开发,HTML5,css3,JavaScript,node.js,vue 1310

原生JS实现分页效果

开发久了,会越来越依赖框架,毕竟利用框架可以快速的完成工作任务,如常见的分页效果,只需要与后端配合,由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能,就可以轻松的实现分页效果,那如果在不依赖框的情况下利用原生JS如何实现一个分页效果呢?接下来给大家分享一段分页代码实现下面的效果。 <!DOCTYPE html> <html> <head>.........

分享前端工程化、AI 应用、Agent 开发与大模型实践! 3340

前端实战:Javascript 实现分页效果

在前端开发中,当我们需要展示大量数据时,一次性将所有数据呈现给用户会导致页面加载缓慢,用户体验不佳。分页效果能够将数据分成多个页面,用户可以根据需要切换页面查看数据,有效提升了页面的加载速度和用户体验。本文的目的是详细介绍如何使用 Javascript 实现分页效果,范围涵盖从基础概念的讲解到实际项目的开发,以及相关技术的拓展。本文将首先介绍分页效果的核心概念和相关联系,包括分页的基本原理和架构。接着详细讲解实现分页效果的核心算法原理和具体操作步骤,并结合 Python 代码进行阐述。

AI架构全栈开发实战笔记 912

如何在获取全部数据后通过js纯前端实现分页效果

之前一直使用前后端配合的方式实现分页效果,即在后台将数据进行分页处理,前端向后端发送页数参数,单独的请求某一页的数据。目前在数据量不是很大的基础上要实现js纯前端分页,找了几个插件没有很好的解决方案,最后参照网络博客使用js实现。说明:在调研过程中参考了一位大神的博客,但是忘记了博客链接,部分代码直接来自于该博客。

bug处理进行时 9806

js,jquery实现分页效果

1,原生js实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>js实现原生分页</title> <style type="text/css"> ul li{ ma

spider_man 711
上一篇: innerhtml用法 innertext用法 以及innerHTML与innertext的区别
下一篇: php分页类-不必改动就可以用的php分页类
HackProgramer
博客等级 码龄12年 255粉丝 23原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值