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