JavaScript实现长文本分页

最新推荐文章于 2022-04-14 06:30:20 发布

Nov_Yan

最新推荐文章于 2022-04-14 06:30:20 发布

阅读量858

点赞数 1

文章标签： js css javascript html

本文链接：https://blog.csdn.net/qq_34991010/article/details/111637383

版权

<div id="textPages">
		</div>
		<div id="pages"></div>

<style type="text/css">
			#textPages {
				width: 500px;
				height: 200px;
				overflow-pageINdex: hidden;			/*不显示超过指定页的内容*/
				overflow-y: hidden;					/*不显示超过指定高度的内容*/
				word-break: break-all;
			}
</style>

<script>
		var obj = document.getElementById("textPages");
		var page = document.getElementById("pages");
		window.onload=function(){
			var allPages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj.offsetHeight));//获取页面数量
				pages.innerHTML = "<b>共"+allPages+"页</b>";                                    //输出页面数量
				for (var i=1;i<=allPages;i++){
					pages.innerHTML += "<a href=\"javascript:showPage('"+i+"');\">第"+i+"页</a>&nbsp;";//循环输出第几页
				}
		}
		function showPage(pageIndex)
		{
			obj.scrollTop=(pageIndex-1)*parseInt(obj.offsetHeight);         //根据高度，输出指定的页
		}

	</script>