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


Posted in Javascript onMarch 05, 2014

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; 
}
Javascript 相关文章推荐
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
JavaScript获取XML数据附示例截图
Mar 05 #Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 #Javascript
javascript日期格式化示例分享
Mar 05 #Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 #Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 #Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 #Javascript
js特殊字符过滤的示例代码
Mar 05 #Javascript
You might like
php短域名转换为实际域名函数
2011/01/17 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
python关闭windows进程的方法
2015/04/18 Python
深入浅析Python中的yield关键字
2018/01/24 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
python自动发微信监控报警
2019/09/06 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
高级护理专业毕业生推荐信
2013/12/25 职场文书
2014年售票员工作总结
2014/11/19 职场文书
电影复兴之路观后感
2015/06/02 职场文书
百年校庆感言
2015/08/01 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL