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脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
js判断浏览器的比较全的代码
Feb 13 Javascript
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
iview实现图片上传功能
Jun 29 Javascript
vuejs实现下拉框菜单选择
Oct 23 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小技巧之函数重载
2014/06/02 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python使用插值法画出平滑曲线
2018/12/15 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
python根据时间获取周数代码实例
2019/09/30 Python
python求绝对值的三种方法小结
2019/12/04 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
设计顾问服务计划书
2014/05/04 职场文书
大学生个人求职信
2014/06/02 职场文书
应用外语系自荐信
2014/06/26 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
求职自荐信怎么写
2015/03/04 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
财务部岗位职责范本
2015/04/14 职场文书
2016国培学习心得体会
2016/01/08 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle