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下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
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
swfupload 多文件上传实现代码
2008/08/27 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
文字幻灯片
2006/06/26 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
Django数据库操作的实例(增删改查)
2017/09/04 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
vue常用指令代码实例总结
2020/03/16 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
C语言笔试集
2012/07/24 面试题
皮肤科医师岗位职责
2013/12/04 职场文书
中专生自荐信
2014/06/25 职场文书
社区服务活动小结
2014/07/08 职场文书
三孔导游词
2015/02/05 职场文书
乒乓球比赛通知
2015/04/27 职场文书
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android