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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
一段实现页面上的图片延时加载的js代码
Feb 11 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
js获取checkbox值的方法
Jan 28 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
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中利用XML技术构造远程服务(下)
2006/10/09 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php fread函数使用方法总结
2019/05/28 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
浅析python内置模块collections
2019/11/15 Python
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
应届毕业生求职信
2013/11/30 职场文书
专升本个人自我评价
2013/12/22 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
sql注入报错之注入原理实例解析
2022/06/10 MySQL