js内容分页的问题，在线等

zgycsmb 2011-10-14 04:05:51

页面中，
var content = "";
content += "天地有正气，杂然赋流形。";
content += "下则为河岳，上则为日星。";
content += "于人曰浩然，沛乎塞苍冥。";
content += "楚囚缨其冠，传车送穷北。";
content += "鼎镬甘如饴，求之不可得。";
content += "阴房阗鬼火，春院闭天黑。";
content += "牛骥同一皂，鸡栖凤凰食。";
content += "一朝蒙雾露，分作沟中瘠。";
content += "如此再寒暑，百疠自辟易。";
content += "嗟哉沮洳场，为我安乐国。";
content += "岂有他缪巧，阴阳不能贼。";
content += "顾此耿耿在，仰视浮云白。";
content += "悠悠我心悲，苍天曷有极。";
content += "哲人日已远，典刑在夙昔。";
content += "风檐展书读，古道照颜色。";

上面的内容中，每句文字中都带有。号，现以。结束的那句为一条记录，共１５条记录，
现需:分三页显示，每页显示５条记录，可翻页，如何实现呀
thanks

...全文

245 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

ZXY900213 2011-10-14

打赏
举报

// 首页

        function first() {

            index = 1;

            for (var i = 0; i < pages.length; i++) {

                pages[i].style.display = (i == 0) ? "block" : "none";

            }

        }



        // 尾页

        function last() {

            index = pages.length;

            for (var i = 0; i < pages.length; i++) {

                pages[i].style.display = (i == pages.length - 1) ? "block" : "none";

            }

        }

zgycsmb 2011-10-14

打赏
举报

多谢３楼的，
上一页　下一页翻页可以了，可首页　尾页的呢，（分页时要可点击　首页　上一页　下一页　尾页）

在线等，thanks

小坏猫 2011-10-14

打赏
举报

文天祥《正气歌》

zgycsmb 2011-10-14

打赏
举报

这个我不熟习，楼上的，帮忙写下　首页　尾页。

ZXY900213 2011-10-14

打赏
举报

大哥，，首页，尾页还不简单？？自己动下手啦，，，

zgycsmb 2011-10-14

打赏
举报

多谢３楼的，
上一页　下一页翻页可以了，可首页　尾页的呢，（分页时要可点击　首页　上一页　下一页　尾页）

ZXY900213 2011-10-14

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title></title>    

</head>

<body>

    <div id="pages"></div>

    <div id="pager">

        <a href="javascript:;" onclick="prev()">上一页</a>

        <a href="javascript:;" onclick="next()">下一页</a>

    </div>

    <script type="text/javascript">

        var content = "";

        content += "天地有正气，杂然赋流形。";

        content += "下则为河岳，上则为日星。";

        content += "于人曰浩然，沛乎塞苍冥。";

        content += "楚囚缨其冠，传车送穷北。";

        content += "鼎镬甘如饴，求之不可得。";

        content += "阴房阗鬼火，春院闭天黑。";

        content += "牛骥同一皂，鸡栖凤凰食。";

        content += "一朝蒙雾露，分作沟中瘠。";

        content += "如此再寒暑，百疠自辟易。";

        content += "嗟哉沮洳场，为我安乐国。";

        content += "岂有他缪巧，阴阳不能贼。";

        content += "顾此耿耿在，仰视浮云白。";

        content += "悠悠我心悲，苍天曷有极。";

        content += "哲人日已远，典刑在夙昔。";

        content += "风檐展书读，古道照颜色。";



        var arr = content.split("。");

        var html = "";

        for (var i = 0; i < arr.length; i++) {            

            if (i == 0) html += "<div>";

            else if (i == arr.length - 1) html += "</div>";

            else if (i % 5 == 0) html += "</div><div style='display:none;'>"

            html += (arr[i] + "。<br />");

        }

        document.getElementById("pages").innerHTML = html;



        var index = 1; //当前页

        var pages = document.getElementById("pages").getElementsByTagName("div");

        // 上一页

        function prev() {

            index = --index < 1 ? 1 : index;

            for (var i = 0; i < pages.length; i++) {

                pages[i].style.display = (i == index - 1) ? "block" : "none";

            }

        }

        // 下一页

        function next() {

            index = ++index > pages.length ? pages.length : index;

            for (var i = 0; i < pages.length; i++) {

                pages[i].style.display = (i == index - 1) ? "block" : "none";

            }

        }

    </script>

</body>

</html>

zgycsmb 2011-10-14

打赏
举报

多谢楼上的，可代码运行不出结果，
你再看下是不是哪写错了。

ZXY900213 2011-10-14

打赏
举报

没测试...

<div id="pages"></div>

<div id="pager">

        <a href="javascript:;" onclick="prev()">上一页</a>

        <a href="javascript:;" onclick="next()">下一页</a>

</div>

var content = "";

content += "天地有正气，杂然赋流形。";

content += "下则为河岳，上则为日星。";

content += "于人曰浩然，沛乎塞苍冥。";

content += "楚囚缨其冠，传车送穷北。";

content += "鼎镬甘如饴，求之不可得。";

content += "阴房阗鬼火，春院闭天黑。";

content += "牛骥同一皂，鸡栖凤凰食。";

content += "一朝蒙雾露，分作沟中瘠。";

content += "如此再寒暑，百疠自辟易。";

content += "嗟哉沮洳场，为我安乐国。";

content += "岂有他缪巧，阴阳不能贼。";

content += "顾此耿耿在，仰视浮云白。";

content += "悠悠我心悲，苍天曷有极。";

content += "哲人日已远，典刑在夙昔。";

content += "风檐展书读，古道照颜色。";



var arr = content.split("。");

        var html = "";

        for (var i = 0; i < arr.length; i++) {

            html += (i % 5 == 0 ? ("<div>" + arr[i] + "</div>") : arr[i]);

        }

        document.getElementById("pages").innerHTML = html;



        var index = 1; //当前页

        var pages = document.getElementById("pages").getElementsByTagName("div");

        // 上一页

        function prev() {

            index = --index < 1 ? 1 : index;

            for (var i = 0; i < pages.length; i++) {

                pages[i].style.display = (i == index - 1) ? "block" : "none";

            }

        }

        // 下一页

        function next() {

            index = ++index > pages.length ? pages.length : index;

            for (var i = 0; i < pages.length; i++) {

                pages[i].style.display = (i == index - 1) ? "block" : "none";

            }

        }