龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

js对文章内容进行分页示例代码

时间:2014-06-09 10:12来源:网络整理 作者:网络 点击:
分享到:
这篇文章主要介绍了使用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;
}
收藏文章
表情删除后不可恢复,是否删除
取消
确定
图片正在上传,请稍后...
评论内容为空!
还没有评论,快来抢沙发吧!
按钮 内容不能为空!
立刻说两句吧! 查看0条评论
精彩图集

赞助商链接