js--分页效果(自己初版)

最新推荐文章于 2025-04-10 11:58:43 发布

lansdmn

最新推荐文章于 2025-04-10 11:58:43 发布

阅读量442

点赞数

分类专栏： JavaScript 文章标签： javascript function string

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/lansdmn/article/details/4137371

版权

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单的分页显示功能实现方案，通过JavaScript函数处理页面索引，并生成相应导航链接。适用于具有一定数量的数据集，需要进行分页展示的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        function DisplayIndex(currentIndex)
        {
            var OutStr="";
            var pageCounter=49;
             var intValue;

            currentIndex+=1;

            if(currentIndex%10==0)
            {
                intValue=Math.floor((currentIndex-1)/10)*10;
            }
            else
            {
                intValue=Math.floor(currentIndex/10)*10;
            }
            if(Math.floor((currentIndex-1)/10)>0)
            {
                 OutStr+="  <a href='javascript:display(0)'>1</a>  ";
                 OutStr+="  <a href='javascript:display("+(Math.floor((currentIndex-1)/10)*10-1)+")'>...</a>  ";
            }
            for(var i=intValue+1;i<=pageCounter;i++)
            {
                if (i != currentIndex)
                {
                     OutStr+="  <a href='javascript:display("+(i-1)+")'>"+i+"</a>  ";
                }
                else
                {
                    OutStr+=+""+i;
                }
                if(i%10==0&& i!=pageCounter)
                {
                    OutStr+="  <a href='javascript:display("+i+")'>...</a>  "
                    break;
                }
            }

            if(pageCounter>10 && Math.floor(pageCounter/10)!=Math.floor((currentIndex-1)/10)&&(pageCounter%10!=0||pageCounter-10>=currentIndex))
             {
                    OutStr+="  <a href='javascript:display("+(pageCounter-1)     +")'>"+pageCounter+"</a>  ";



             }


            document.getElementById("OutStr").innerHTML=OutStr;
            var s=new String("Hello World");
            var m=[1,2,"javascript"];
            var g="aaaaa";

        }
        function display(index)
        {
            document.getElementById("displayArea").innerHTML=index;
            DisplayIndex(index);
        }
        function init()
        {
            display(0);
        }
        window.οnlοad=init;

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。