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 相关文章推荐
accesskey 提交
Jun 26 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
前端学习——JavaScript原生实现购物车案例
Mar 31 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
php递归实现无限分类的方法
2015/07/28 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python保存字符串到文件的方法
2015/07/01 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
Python列表切片常用操作实例解析
2019/12/16 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
教育科研先进个人材料
2014/01/26 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
会计实训报告范文
2014/11/04 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python