html分页代码实例的简单介绍

本篇文章给大家谈谈html分页代码实例，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、HTML怎么分页，index.html#home为第一个页面，以此类推？
• 2、怎样在HTML用代码实现内容换页
• 3、HTML中如何使网页在下面的每一个div中自动分页显示上一页下一页
• 4、html简单的分页代码怎么写？

HTML怎么分页，index.html#home为第一个页面，以此类推？

类似#home这种链接是在一个页面内的跳转，跳转到的位置我们称之为“锚点”。

下面的代码存到index.html即可查看效果

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleTitle/title

/head

body

div style="position: fixed;top: 0;left: 0;background-color: #fff"

a href="#home"首页/a

a href="#page2"page2/a

a href="#page3"page3/a

/div

div style="height: 800px;border: 1px solid #ddd;padding-top: 35px;"

a id="home"/a

brbr

这里是首页部分

/div

div style="height: 800px;border: 1px solid #ddd;padding-top: 35px;"

a id="page2"/a

brbr

这里是page2部分

/div

div style="height: 1000px;border: 1px solid #ddd;padding-top: 35px;"

a id="page3"/a

brbr

这里是page3部分

/div

/body

/html

怎样在HTML用代码实现内容换页

最常见的分页的代码是 :ASP PHP JSP

如果你的静态页面要分页 有一个 方法---JS

HTML上的分页JS代码

form onsubmit="window.location=this.aaa.options[this.aaa.selectedIndex].value; return false;"

select name="select" onchange="javascript:window.location.href=this.options[this.selectedIndex].value"

SCRIPT type=text/javascript

for(var pN=1;pN184;pN++)

document.write("option value='Page_"+pN+".html'第"+pN+"页/option");

/SCRIPT

/select/td/form

加一个page=8的参数?

然后在for那里再用条件判断??

form onsubmit="window.location=this.ep8.options[this.ep8.selectedIndex].value; return false;"

select name="select" onchange="javascript:window.location.href=this.options[this.selectedIndex].value"

script type="text/javascript"

p=8;

for(var i=1;i9;i++)

if (i==p){

document.write("option value='Page_"+p+".html' selected第"+p+"页/option");

}

else {

document.write("option value='Page_"+i+".html'第"+i+"页/option");

}

/script

/select/form

HTML中如何使网页在下面的每一个div中自动分页显示上一页下一页

!DOCTYPE html

HTML

HEAD

    TITLENew Document/TITLE

    style type="text/css"

        * {

    margin: 0;

    padding: 0;

}

#content {

    margin: auto;

    width: 400px;

    border: 1px solid black;

}

.on {

    color: red

}

.off {

    color: black

}

body {

    font-family: "Courier New"

}

ul {

    padding: 10px 0px 10px 45px;

}

ul li {

    color: red

}

    /style

    script type="text/javascript"

        window.onload = function() {

            Page.arr = Page.pushArr();

            Page.setClickPageNum();

            Page.allContent("null");

        }

        var Page = {

            defaultPerPageNum: 4,

            arr: null,

            removedBlankStr: function(str) {

                var regex = /^\s*|\s*$/g;

                return str.replace(regex, "");

            },

            setTotalPageNums: function() {

                var pp = Number(Page.perPageNum('t1'));

                var pnums = Page.arr.length / pp  parseInt(Page.arr.length / pp) ? parseInt(Page.arr.length / pp) + 1 : Page.arr.length / pp;

                var div = document.getElementById('pagenum');

                div.innerHTML = "";

                for (var i = 0; i  pnums; i++) {

                    var a = document.createElement('a');

                    a.href = "#";

                    a.innerHTML = i + 1;

                    a.setAttribute('class', 'off');

                    div.appendChild(a);

                    div.innerHTML += "nbsp;";

                }

                Page.setClickPageNum();

            },

            perPageNum: function(PerPageNum) {

                var pv = document.getElementById(PerPageNum).value;

                pv = Page.removedBlankStr(pv);

                if ("" == pv || isNaN(pv) || (new RegExp(/^[-]*[0]+.*?$/g).test(pv)) || pv  0) {

                    pv = Page.defaultPerPageNum;

                    document.getElementById(PerPageNum).value = pv;

                }

                document.getElementById('p1').innerHTML = pv;

                return pv;

            },

            getClickPageNum: function(diva) {

                return parseFloat(diva.innerHTML);

            },

            setClickPageNum: function() {

                var divx = document.getElementById('pagenum');

                var a = divx.children;

                var len = a.length;

                for (var i = 0; i  len; i++) {

                    a[i].onclick = function() {

                        this.className = "on";

                        Page.allContent(this);

                    };

                }

            },

            pushArr: function() {

                var arr = new Array();

                var ul = document.getElementById('ul1');

                var len = ul.children.length;

                for (var i = 0; i  len; i++) {

                    arr.push(ul.children[i]);

                }

                return arr;

            },

            allContent: function(divb) {

                var ul = document.getElementById('ul1');

                ul.innerHTML = "";

                var pp = parseFloat(this.perPageNum('t1'));

                if ("null" == divb) {

                    divb = document.getElementById('pagenum').children[0];

                    divb.className = "on";

                }

                var pg = this.getClickPageNum(divb); // 1 2 3

                var ppj = pp * (pg - 1); // 0 4 8

                var end = ppj + pp; // 4 8 12

                var arr = this.arr;

                var pnums = arr.length / pp  parseInt(arr.length / pp) ? parseInt(arr.length / pp) + 1 : arr.length / pp;

                for (var i = ppj; i  end; i++) {

                    var a = arr[i];

                    if (null != a) {

                        ul.appendChild(a);

                    }

                }

            },

            doAction: function() {

                Page.perPageNum('t1');

                Page.setTotalPageNums();

                Page.allContent("null");

            }

        };

    /script

/HEAD

BODY

    div id='content'

        ul id="ul1"

            li1/li

            li2/li

            li3/li

            li4/li

            li5/li

            li6/li

            li7/li

            li8/li

            li9/li

        /ul

        div id="pagenum"a href="#" class="on"1/anbsp;a href="#"2/anbsp;a href="#"3/a

        /div

        input type="text" value="4" id="t1" /nbsp;

        input type="button" value="set" onclick="Page.doAction();" /nbsp;nbsp;Each Page

        a id="p1"/aRecords/div

/BODY

/HTML

html简单的分页代码怎么写？

网页链接

看一下这个吧，现在很少有人手动写分页了，一般都是用插件。或者现在主流的前端框架，都有用户量特别大的前端组件库，用起来很方便。其实这个分页手写js并不难，主要是理清逻辑就可以了，能写但是没必要~如果是比较老的前端框架，必须手写js分页逻辑，追问就行，我给你屡屡

html分页代码实例的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、html分页代码实例的信息别忘了在本站进行查找喔。