js对文章内容进行分页示例代码
更新时间：2014年03月05日 11:03:30 作者：
这篇文章主要介绍了使用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;
}
复制代码 代码如下:
<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;
}
相关文章
这篇文章主要为大家详细介绍了HTML+CSS+JavaScript实现下拉菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
这篇文章主要介绍了JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法,涉及JS页面元素遍历及属性动态操作相关技巧,需要的朋友可以参考下2016-12-12
Bootstrap-table使用footerFormatter做统计列功能
大家在做表格的时候，经常会做统计功能，其实统计也并没想想的这么复杂，实现起来很简单，接下来通过通过本文给大家介绍Bootstrap-table使用footerFormatter做统计列功能,需要的朋友可以参考下2018-09-09
这篇文章主要给大家介绍了关于Three.Js实现颜色自定义变换效果的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了微信小程序动态增加按钮组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
微信 jssdk 签名错误invalid signature的解决方法
这篇文章主要介绍了微信 jssdk 签名错误invalid signature的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要为大家详细介绍了HTML5+Canvas调用手机拍照功能实现图片上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
jquery的$getjson调用并获取远程的JSON字符串问题
jQuery中常用getJSON来调用并获取远程的JSON字符串，将其转换为JSON对象，如果成功，则执行回调函数,本文将详细介绍，需要的朋友可以参考下2012-12-12
内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束，由于浏览器垃圾回收方法有bug，会产生内存泄露，下面与大家详细探讨下内存泄露的几种情况2013-05-05
这篇文章主要为大家详细介绍了JavaScript登录验证的基础教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
最新评论