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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
js实现微信分享代码
Oct 11 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 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学习之数据类型之间的转换代码
2011/05/29 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
python操作ie登陆土豆网的方法
2015/05/09 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Python解惑之True和False详解
2017/04/24 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
django的autoreload机制实现
2020/06/03 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
java字符串格式化输出实例讲解
2021/01/06 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
个性大学生自我评价
2013/12/04 职场文书
村委会主任先进事迹
2014/01/15 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
小学生暑假家长评语
2014/04/17 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
个人党性分析总结
2015/03/05 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
小学生暑假安全公约
2015/07/14 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript