js分页函数

最新推荐文章于 2024-03-19 05:05:30 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2024-03-19 05:05:30 发布

阅读量331

点赞数

分类专栏： JavaScript积跬步至千里文章标签： js分页

本文链接：https://blog.csdn.net/wstpa/article/details/49952153

版权

JavaScript积跬步至千里专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #page a {margin: 10px;}
    </style>
    <script type="text/javascript">
    window.onload = function () {
        page({
            id : 'page',
            nowNum : 9,
            allNum : 10,
            bBtn : false,
            callBack : function(now,all) {
                alert('当前页:' + now +',总共页:'+all);
            }
        })
        function page(opt) {
            if (!opt.id) {return};
            var nowNum = opt.nowNum || 1;
            var allNum = opt.allNum || 5;
            var bBtn = opt.bBtn || false;
            var callBack = opt.callBack || function(){};
            var obj = document.getElementById(opt.id);

            if (allNum >= 6 && nowNum >=5) {
                var a = document.createElement('a');
                a.href = '#1';
                a.innerHTML = '首页';
                obj.appendChild(a)
            };

            if (nowNum >= 2) {
                var a = document.createElement('a');
                a.href = '#'+(nowNum-1);
                a.innerHTML = '上一页';
                obj.appendChild(a)
            };

            if (allNum <= 5) {

                for (var i = 1; i <= allNum; i++) {
                    var a = document.createElement('a');
                    a.href = '#'+i;
                    if (i == nowNum) {
                        a.innerHTML = i;
                    } else {
                        a.innerHTML = '['+ i +']'
                    }

                    obj.appendChild(a)
                };

            }else {
                if (nowNum ==1 || nowNum == 2) {
                    // if (opt.nowNum == 1) {
                        for (var i = 1; i <= 5; i++) {
                            var a = document.createElement('a');
                            a.href = '#'+i;
                            if (i == nowNum) {
                                a.innerHTML = i;
                            } else {
                                a.innerHTML = '['+ (i) +']'
                            }

                            obj.appendChild(a)
                        };
                    // };

                }
                else if(  (allNum - nowNum) <= 1 ) {    //opt.nowNum ==9 || opt.nowNum == 10
                    for (var i = 1; i <= 5; i++) {
                        var a = document.createElement('a');
                        a.href = '#' + (allNum - 5 + i);
                        // if (i == opt.nowNum) {
                        //  a.innerHTML = opt.allNum - opt.nowNum + 5;
                        // } else {
                        //  a.innerHTML = '['+ (opt.allNum - opt.nowNum + 5) +']'
                        // }
                        if( (allNum-nowNum == 0 && i==5) || (allNum - nowNum == 1 && i==4) ){
                            a.innerHTML = (allNum - 5 + i);
                        }else{
                             a.innerHTML = '['+ (allNum - 5 + i) +']';
                        }

                        obj.appendChild(a)
                    };

                    // oA.href = '#' + (allNum - 5 + i);

                    //    if((allNum - nowNum) == 0 && i==5){
                    //     oA.innerHTML = (allNum - 5 + i);
                    //    }
                    //    else if((allNum - nowNum) == 1 && i==4){
                    //     oA.innerHTML = (allNum - 5 + i);
                    //    }
                    //    else{
                    //     oA.innerHTML = '['+ (allNum - 5 + i) +']';
                    //    }

                }
                else {
                    for (var i = 1; i <= 5; i++) {
                        var a = document.createElement('a');
                        a.href = '#'+(nowNum-3+i);
                        if (i == 3) {
                            a.innerHTML = nowNum-3+i;
                        } else {
                            a.innerHTML = '['+ (nowNum-3+i) +']'
                        }

                        obj.appendChild(a)
                    };
                }

            }

            if ((allNum-nowNum) >= 1) {
                var a = document.createElement('a');
                a.href = '#'+(nowNum+1);
                a.innerHTML = '下一页';
                obj.appendChild(a)
            };
            if (allNum >= 6 && (allNum-nowNum) >=3 ) {
                var a = document.createElement('a');
                a.href = '#'+allNum;
                a.innerHTML = '尾页';
                obj.appendChild(a)
            };
            if (bBtn) {
                callBack(nowNum,allNum);

            };

            var aBtn = obj.getElementsByTagName('a');
            for (var i = 0; i < aBtn.length; i++) {
                aBtn[i].onclick = function() {
                    var nowNum = parseInt(this.getAttribute('href').substring(1));

                    obj.innerHTML = '';
                    page({

                     id : opt.id,
                     nowNum : nowNum,
                     allNum : allNum,
                     bBtn : true,
                     callBack : callBack

                    });
                    // callBack(nowNum,allNum);
                    return false;
                }

            };
        }
    }
    </script>
</head>
<body>
    <div id="page">
        <!-- <a href="#10">首页</a>
        <a href="#1">上一页</a>
        <a href="#2">[2]</a>
        <a href="#3">[3]</a>
        <a href="#4">4</a>
        <a href="#5">[5]</a>
        <a href="#6">[6]</a>
        <a href="#7">下一页</a>
        <a href="#10">尾页</a> -->
    </div>
</body>
</html>

见面时的呼吸都曾反复练习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js分页函数

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #page a {margin: 10px;} </style> <script type="text/javascript">
复制链接

扫一扫