当前位置：文江博客话题详情

JavaScript 分页面向对象编程

JavaScript用对象的概念写一个简单的分页

发布于 2022-09-04 12:41:28 字数 999 浏览 28 评论 0

初次接触对象，现在想写一个简单的分页
<body>

<a href="#" id="first">首页</a>
<a href="#" id="pre">上一页</a>
<span id="pageNum">当前页数</span>/<span id="pageCount">总页数</span>
<a href="#" id="next">下一页</a>
<a href="#" id="last">最后页</a>


<script>
    

    var page = (function(){
        var pageNum = 1;
        var pageCount = 10;
        return {
            getPageNum :function(){
                return pageNum;
            },
            getPageCount :function(){
                return pageCount;
            },
            first :function(){
                pageNum = 1;
            },
            last :function(){
                pageNum = 10;
            },
            next:function(){
                pageNum++;
            },
            pre:function(){
                pageNum--;
            }
        }
    })
</script>

</body>
这段js代码是一大牛提供的，但是接下来不知道怎么写，请各位大神帮忙写完整，感谢

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

两人的回忆 2022-09-11 12:41:28

<body>

<div id="pagebar">
    <a href="#" v-if="pageNumber>1" v-on:click="firstPage">首页</a>
    <a href="#" v-if="pageNumber>1" v-on:click="prevPage">上一页</a>
    {{pageNumber}}/{{pageCount}}
    <a href="#" v-if="pageNumber<pageCount" v-on:click="nextPage">下一页</a>
    <a href="#" v-if="pageNumber<pageCount" v-on:click="lastPage">最后页</a>
</div>

<script src="js/vue.js"></script>
<script>
    


    //构造方法
    var Page = function (recordCount,pageSize) {
        // body...
        this.recordCount = recordCount;
        this.pageSize = pageSize;
        this.pageNumber = 1;
        this.pageCount = Math.ceil(recordCount/pageSize);
    }//this 指向当前对象

    Page.prototype.firstPage = function() {
        // body...
        this.pageNumber = 1;
    }
    Page.prototype.prevPage = function(){
        if(this.pageNumber>1){
            this.pageNumber--;
        }
    }
    Page.prototype.nextPage = function(){
        if(this.pageNumber<this.pageCount){
            this.pageNumber++;
        }
    }
    Page.prototype.lastPage = function(){
        this.pageNumber = this.pageCount;
    }

    var page = new Page(101,10);

    var pageBar = new Vue({
        el:'#pagebar',
        data:{
            pageNumber:page.pageNumber,
            pageCount:page.pageCount
        },
        methods:{
            firstPage:function(){
                page.firstPage();
                this.pageNumber=page.pageNumber;
            },
            prevPage:function(){
                page.prevPage();
                this.pageNumber=page.pageNumber;
            },
            nextPage:function(){
                page.nextPage();
                this.pageNumber=page.pageNumber;
            },
            lastPage:function(){
                page.lastPage();
                this.pageNumber=page.pageNumber;
            },
        }
    })

</script>

</body>

~没有更多了~

关于作者

柏林苍穹下

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文