js對文章內(nèi)容進行分頁示例代碼
更新時間：2014年03月05日 11:03:30 作者：
這篇文章主要介紹了使用js對文章內(nèi)容進行分頁的具體實現(xiàn),需要的朋友可以參考下
Thinkphp中文章顯示代碼：
<div id="showContent">{$article.content|htmlspecialchars_decode}</div>
<div id="articlePages"></div>
js實現(xiàn)代碼：
<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));
//獲取總頁數(shù)，主要是應(yīng)用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;
}
復(fù)制代碼 代碼如下:
<div id="showContent">{$article.content|htmlspecialchars_decode}</div>
<div id="articlePages"></div>
js實現(xiàn)代碼：
復(fù)制代碼 代碼如下:
<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));
//獲取總頁數(shù)，主要是應(yīng)用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代碼：
復(fù)制代碼 代碼如下:
#showContent {
color:black;
font-size: 16px;
height: 700px;
overflow: hidden;
}
#articlePages {
text-align: right;
}
相關(guān)文章
List the Codec Files on a Computer
List the Codec Files on a Computer...2007-06-06
這篇文章主要介紹了JS精確判斷數(shù)據(jù)類型代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了js代碼自動刪除稿件的普通彈幕功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
如何用JavaScript實現(xiàn)一個數(shù)組惰性求值庫
這篇文章主要介紹了如何用JavaScript實現(xiàn)一個數(shù)組惰性求值庫，對惰性求值感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要為大家詳細介紹了JavaScript SHA-256加密算法代碼，具有一定的參考價值，感興趣的朋友可以參考一下2016-10-10
如何調(diào)用執(zhí)行iframe中的方法？如下2008-10-10
2008-02-02
懸浮效果想必大家都不陌生吧，本文為大家介紹下使用js固定懸浮的實現(xiàn)思路及代碼，感興趣的朋友可以參考下2013-08-08
JavaScript 是一款強大的廣泛運用于現(xiàn)代Web站點及應(yīng)用的腳本語言。作為一個技藝精湛的 Web 開發(fā)者，掌握JavaScript可以增強用戶的使用體驗，提供交互及富客戶端等功能。2010-04-04
js 獲取后臺的字段 改變 checkbox的被選中的狀態(tài) 代碼
js 獲取后臺的字段 改變 checkbox的被選中的狀態(tài) 代碼，需要的朋友可以參考一下2013-06-06