你的位置:首页 > Java教程

[Java教程]js对文章内容进行分页示例代码


这篇文章主要介绍了使用js对文章内容进行分页的具体实现,需要的朋友可以参考下

Thinkphp中文章显示代码: 

代码如下:

<div id="showContent">{$article.content|htmlspecialchars_decode}</div> <div id="articlePages"></div> 

  



js实现代码: 

代码如下:

<script type="text/javascript"> var obj = document.getElementById("showContent"); var pages= document.getElementById("articlePages"); //alert(obj.scrollHeight); window.onload= function() { var all=Math.ceil(parseInt(obj.scrollHeight)/ parseInt(obj.offsetHeight)); //获取总页数,主要是应用scrollHeight pages.innerHTML="共"+ all +"页"; for(var i=1; i<=all;i++) { pages.innerHTML +=" <a href=\javascript:showPage('"+i+"');> "+i+"</a> "; //输出所有页码 } } function showPage(pageIndex) { obj.scrollTop = (pageIndex-1)* parseInt(obj.offsetHeight); } </script> 

  



css代码: 

代码如下:

#showContent { color:black; font-size: 16px; height: 700px; overflow: hidden; } #articlePages { text-align: right; }