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