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)文章
HTML+CSS+JavaScript實現(xiàn)下拉菜單效果
這篇文章主要為大家詳細介紹了HTML+CSS+JavaScript實現(xiàn)下拉菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JS實現(xiàn)頁面中所有img對象添加onclick事件及新窗口查看圖片的方法
這篇文章主要介紹了JS實現(xiàn)頁面中所有img對象添加onclick事件及新窗口查看圖片的方法,涉及JS頁面元素遍歷及屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12
Bootstrap-table使用footerFormatter做統(tǒng)計列功能
大家在做表格的時候，經(jīng)常會做統(tǒng)計功能，其實統(tǒng)計也并沒想想的這么復(fù)雜，實現(xiàn)起來很簡單，接下來通過通過本文給大家介紹Bootstrap-table使用footerFormatter做統(tǒng)計列功能,需要的朋友可以參考下2018-09-09
這篇文章主要給大家介紹了關(guān)于Three.Js實現(xiàn)顏色自定義變換效果的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細介紹了微信小程序動態(tài)增加按鈕組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
微信 jssdk 簽名錯誤invalid signature的解決方法
這篇文章主要介紹了微信 jssdk 簽名錯誤invalid signature的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
HTML5+Canvas調(diào)用手機拍照功能實現(xiàn)圖片上傳（下）
這篇文章主要為大家詳細介紹了HTML5+Canvas調(diào)用手機拍照功能實現(xiàn)圖片上傳，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
jquery的$getjson調(diào)用并獲取遠程的JSON字符串問題
jQuery中常用getJSON來調(diào)用并獲取遠程的JSON字符串，將其轉(zhuǎn)換為JSON對象，如果成功，則執(zhí)行回調(diào)函數(shù),本文將詳細介紹，需要的朋友可以參考下2012-12-12
內(nèi)存泄露是指一塊被分配的內(nèi)存既不能使用，又不能回收，直到瀏覽器進程結(jié)束，由于瀏覽器垃圾回收方法有bug，會產(chǎn)生內(nèi)存泄露，下面與大家詳細探討下內(nèi)存泄露的幾種情況2013-05-05
這篇文章主要為大家詳細介紹了JavaScript登錄驗證的基礎(chǔ)教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11