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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
一个选择最快的服务器转向代码
Apr 27 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
Express.JS使用详解
2014/07/17 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
Python strip lstrip rstrip使用方法
2008/09/06 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Python 实现微信自动回复的方法
2020/09/11 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
消防安全员岗位职责
2014/03/10 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
酒会开场白大全
2015/06/01 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫