手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js对文章内容进行分页示例代码
js对文章内容进行分页示例代码
摘要:Thinkphp中文章显示代码:复制代码代码如下:{$article.content|htmlspecialchars_decode}js实...

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;

}

【js对文章内容进行分页示例代码】相关文章:

基于jQuery实现的无刷新表格分页实例

将HTML自动转为JS代码

网页常用特效代码整理

新闻内页-JS分页

获得当前页面URL地址的三个JS代码

剖析Node.js异步编程中的回调与代码设计模式

在HTML中插入JavaScript代码的示例

免费空间广告万能消除代码

javascript相关事件的几个概念

Javascript特效:随机显示图片的源代码

精品推荐
分类导航