js 文章分页的二种方法

通过高度进行分页

html

<div id="showContent">{$article.content|htmlspecialchars_decode}</div> <div id="articlePages"></div>

css

#showContent {

color:black;

font-size: 16px;

height: 700px;

overflow: hidden;

}

#articlePages {

text-align: right;

}

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>

转载自https://www.cnblogs.com/good10000/archive/2015/08/27/4763787.html

 

通过p标签进行分页（每三十段分一次）

html

<div id="showContent" style="display: none;">{$article.body|html_entity_decode|raw}</div>
<div id="mains"></div>
<div id="articlePages"></div>

js

$(document).ready(function() {
            var l = $('#showContent').children('p').length;
            var pages= document.getElementById("articlePages");
            console.log(l);
            window.οnlοad= function()
            {
                for (var i =0; i <=29; i++) {
                    var main = $('#showContent').children('p').eq(i).html();
                    main = '<p>'+main+'</p>';
                    if (main !== '<p>undefined</p>') {
                        $('#mains').append(main);
                    }
                }
                var all=Math.ceil(l/ 30);
                //获取总页数，主要是应用scrollHeight
                pages.innerHTML="共"+ all +"页";
                for(var i=1; i<=all;i++)
                {
                pages.innerHTML +=" <a href=\javascript:showPage('"+i+"');> "+i+"</a> ";
                //输出所有页码
                }
            }
        });
        function showPage(pageIndex){
            $('#mains').empty();
            for (var i = (pageIndex-1)*30; i <= pageIndex*30 -1; i++) {
                var main = $('#showContent').children('p').eq(i).html();
                main = '<p>'+main+'</p>';
                if (main !== '<p>undefined</p>') {
                    $('#mains').append(main);
                }
            }
        }