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 相关文章推荐
JQuery选择器特辑 详细小结
May 14 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 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 函数学习简单小结
2010/07/08 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
PHP 错误处理机制
2015/07/06 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
JS正则中的RegExp对象对象
2012/11/07 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
python递归法解决棋盘分割问题
2019/07/17 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
会计电算化学生个人的自我评价
2014/02/08 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
思想政治表现评语
2015/01/04 职场文书
单位考核聘任报告
2015/03/02 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS