首页 > 试题广场 >

分页

[编程题]分页

热度指数：2685 时间限制：C/C++ 3秒，其他语言6秒空间限制：C/C++ 256M，其他语言512M
算法知识视频讲解

本题展示了一个分页组件，界面中存在id=jsContainer的节点A，系统会随机实例化各种Pagination实例，请按照如下要求补充完成Pagination函数。
1、最多连续显示5页，居中高亮显示current页（如demo1所示)
2、total <= 1 时，隐藏该组件（如demo2所示）
3、如果total<=5，则显示全部页数，隐藏“首页”和“末页”元素（如demo3所示）
4、当current居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素(如demo4和demo5所示)
5、total、current均为正整数，1 <= current <= total
6、当前界面中，节点A为系统执行 new Pagination(节点A，20, 10) 后的展示效果
7、请不要手动修改html和css
8、不要使用第三方插件

算法知识视频讲解

Pandora417

发表于 2021-07-09 15:14:25

function Pagination(container, total, current) { this.total = total; this.current = current; this.html = html; this.val = val; this.el 展开全文

啊阿泽

发表于 2022-04-03 17:28:19

js简洁代码 function Pagination(container, total, current) { this.total = total; this.current = current; this.html = html; this.val = val; 展开全文

摩罗星

发表于 2021-06-24 19:22:58

第一次写困难题的题解，如果你有更好的建议和解法，欢迎评论交流。 ~最主要的就是要确定页码的区间 function Pagination(container, total, current) { this.total = total; this.current = current; 展开全文

花落再无相伴

发表于 2022-08-21 18:22:28

思路这样，看着有点乱 function Pagination(container, total, current) { // z总页数 this.total = total; & 展开全文

牛客772501182号

发表于 2021-08-13 12:14:24

题目描述不清晰，隐藏首页/末页不能用行内样式是否需要首页/末页li节点的边界条件问题 function Pagination(container, total, current) { // co 展开全文

一叶轻舟呀

发表于 2023-01-12 12:38:30

这个题目的边界要求，不明确，不过，问题不大，改个范围就可以了本题的重点有两个1.排除无用数据，用val函数我不知道这个出题人，是哪里搞来的val函数，如下图所示，可见，该函数原来的作用多半是用于校正current的范围，是有作用的，所以我们需要有该功能的函数val但是，单纯在本环境中执行该函数，并没展开全文

爱吃香菜的河老师在划水

发表于 2023-08-24 12:04:28

{"html":"<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\">\n <style>\n 展开全文

前端消防圆

发表于 2023-07-16 22:09:11

思路：注意，total表示总页数，current表示当前高亮的页数，最多连续显示五页，其中12345则是最大的没有首页尾页，其中123456且当前为3是最小的只显示尾页，其中当前页居中后面最少两页加一个尾页，即如果尾页减去当前页小于3则只显示首页，反之首页尾页均显示。 <script type 展开全文

攀登者1号

发表于 2021-07-08 16:06:16

function Pagination(container, total, current) { this.total = total; this.current = current; this.html = html; this.val = 展开全文

七七零

发表于 2024-06-21 15:08:13

我写的好复杂，好多代码都重复的 function Pagination(container, total, current) { this.total = total; this.current = current; this.html = html; 展开全文

问题信息

前端工程师百度 2021 Javascript

上传者：小小

难度：

14条回答 40收藏 1767浏览

通过挑战的用户

查看代码

beyond2...

2023-06-15 12:16:39
要发财的小龙虾很幸福

2023-06-07 09:01:28
牛客14090...

2023-06-05 09:42:57
牛客41882...

2023-06-02 15:58:34
喜欢摸鱼的海豚...

2023-06-01 18:06:05

相关试题

ajax原理、如何实现刷新数据及优点？

迅雷 Javascript

评论(7)
仅用O(1)的空间，将整数数组按奇...

百度 2011 C++ Java 编程基础 Java工程师 C++工程师

评论(25) 来自百度2011研发工程师笔试卷
判断一个括号字符串是否匹配正确，如...

百度 2011 栈 Java工程师 C++工程师

评论(34) 来自百度2011研发工程师笔试卷
如图 1 表示使用快表（页表）的虚...

编程基础

评论(1)
订单表order_table全部记...

查找数据库数据分析 SQL

评论(2)

分页

扫描二维码，关注牛客网
意见反馈
下载牛客APP，随时随地刷题

扫一扫，把题目装进口袋

求职之前，先上牛客: 扫描二维码，进入QQ群



扫描二维码，关注牛客公众号

公司地址：北京市朝阳区北苑路北美国际商务中心K1座一层-北京牛客科技有限公司
联系方式：010-60728802 投诉举报电话：010-57596212（朝阳人力社保局）
京ICP备14055008号-4 增值电信业务经营许可证营业执照人力资源服务许可证
京公网安备 11010502036488号

.demo{
    margin-bottom: 20px;
    border: 1px solid #ebedf0;
    border-radius: 2px;
    padding: 10px;
}
.demo div{
    margin-bottom: 10px;
    font-size: 14px;
}

.pagination{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    list-style: none;
    display: inline-block;
}
.pagination.hide{
    display: none;
}
.pagination li{
    position: relative;
    display: inline-block;
    float: left;
    height: 32px;
    margin: 0;
    padding: 0 15px;
    line-height: 30px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top-width: 1.02px;
    border-left: 0;
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s;
}
.pagination li:first-child{
    border-left: 1px solid #d9d9d9;
    border-radius: 4px 0 0 4px;
}
.pagination li:last-child{
    border-radius: 0 4px 4px 0;
}
.pagination li:first-child{
    box-shadow: none !important;
}
.pagination li.current{
    border-color: #1890ff;
    color: #1890ff;
    border-left: 1px solid #1890ff;
}
.pagination li.current:not(:first-child) {
    margin-left: -1px;
}

<div class="demo">
        <div>(Demo1) total: 10，current: 4</div>
        <ul class="pagination">
            <li>首页</li>
            <li>2</li>
            <li>3</li>
            <li class="current">4</li>
            <li>5</li>
            <li>6</li>
            <li>末页</li>
        </ul>
    </div>

<div class="demo">
        <div>(Demo2) total: 0，current: 0</div>
        <ul class="pagination hide"></ul>
    </div>

<div class="demo">
        <div>(Demo3) total: 3，current: 2</div>
        <ul class="pagination">
            <li>1</li>
            <li class="current">2</li>
            <li>3</li>
        </ul>
    </div>

<div class="demo">
        <div>(Demo4) total: 10，current: 2</div>
        <ul class="pagination">
            <li>1</li>
            <li class="current">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>末页</li>
        </ul>
    </div>

<div class="demo">
        <div>(Demo5) total: 10，current: 9</div>
        <ul class="pagination">
            <li>首页</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li class="current">9</li>
            <li>10</li>
        </ul>
    </div>
</div>

分页

问题信息

热门推荐

通过挑战的用户

相关试题