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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
express express-session的使用小结
Dec 12 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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生成月历代码
2007/06/14 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
php实现的SESSION类
2014/12/02 PHP
php压缩文件夹最新版
2018/07/18 PHP
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
在Python中实现字典反转案例
2020/12/05 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
观看信仰心得体会
2014/09/04 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
MYSQL 表的全面总结
2021/11/11 MySQL