练习牛客网笔试题--前端js--63-分页

    // 本题展示了一个分页组件，界面中存在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、不要使用第三方插件

1.自己的练习

  <style>
    .demo {
      margin-top: 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: 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;
    }
  </style>

  <div>
    <div id="jsContainer">
      <ul class="pagination">
        <li>首页</li>
        <li>8</li>
        <li>9</li>
        <li class="current">10</li>
        <li>11</li>
        <li>12</li>
        <li>末页</li>
      </ul>
    </div>

    <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>

    function Pagination(container, total, current) {
      this.total = total;
      this.current = current;
      this.html = html;
      this.val = val;

      // this.el = null; 
      // 1. TODO: 创建分页组件根节点 this.el
      this.el = document.createElement('ul')
      this.el.className = 'pagination'
      if (!this.el) return;

      this.el.innerHTML = this.html();
      container.appendChild(this.el);

      // this.el.className = ''; 
      // 3. TODO: 判断是否需要隐藏当前元素
      if (!this.el.innerHTML) {
        this.el.classList.add('hide')
      }

      function html() {
        if (this.total <= 1) return '';

        //2. TODO: 生成组件的内部html字符串
        if (this.total <= 5) {
          for (var i = 1; i <= this.total; i++) {
            var li = document.createElement('li')
            li.innerHTML = i
            this.el.appendChild(li)
          }
          this.el.children[current - 1].className = 'current'
        } else {
          if (this.current === 1 || this.current === 2 || this.current === 3) {
            // var pagenum = [1, 2, 3, 4, 5]
            for (var i = 1; i <= 6; i++) {
              var li = document.createElement('li')
              li.innerHTML = i === 6 ? '末页' : i
              this.el.appendChild(li)
            }
            this.el.children[current - 1].className = 'current'
          } else if (this.current === this.total || this.current === this.total - 1 || this.current === this.total - 2) {
            // var pagenum = [this.total - 4, this.total - 3, this.total - 2, this.total - 1, this.total]
            for (var i = 0; i <= 5; i++) {
              var li = document.createElement('li')
              li.innerHTML = i === 0 ? '首页' : this.total - 5 + i
              this.el.appendChild(li)
            }
            this.el.children[5 - (this.total - current)].className = 'current'
          } else {
            // var pagenum = [this.current - 2, this.current - 1, this.current, this.current + 1, this.current + 2]
            for (var i = 0; i <= 6; i++) {
              var li = document.createElement('li')
              if (i === 0) {
                li.innerHTML = '首页'
              } else if (i === 6) {
                li.innerHTML = '末页'
              } else {
                li.innerHTML = this.current - 3 + i
              }
              this.el.appendChild(li)
            }
            this.el.children[3].className = 'current'
          }
        }
        return this.el.innerHTML;
      }

      function val(current) {
        if (arguments.length === 0) return this.current;
        if (current < 1 || current > this.total || current === this.current) return;
        this.current = current;
        this.el.innerHTML = this.html();
      };
    }

2. 题解

    function Pagination(container, total, current) {
      this.total = total;
      this.current = current;
      this.html = html;
      this.val = val;
      this.el = document.createElement('ul'); // TODO: 创建分页组件根节点
      this.el.className = 'pagination'
      if (!this.el) return;

      this.el.innerHTML = this.html();
      if (!this.el.innerHTML) {
        this.el.className = 'pagination hide'; // TODO: 判断是否需要隐藏当前元素
      }
      container.appendChild(this.el);

      function html() {
        var str = ''
        if (this.total <= 1) return '';

        // TODO: 生成组件的内部html字符串
        if (this.total <= 5) { // 小于5页
          for (let i = 1; i <= this.total; i++) {
            str += i == this.current ? `<li class="current">${this.current}</li>` : `<li>${i}</li>`
          }
        } else { // 大于5页
          if (this.current <= 3) {
            for (let i = 1; i <= 5; i++) { // 最多显示5页
              str += i == this.current ? `<li class="current">${this.current}</li>` : `<li>${i}</li>`
            }
            str += '<li>末页</li>'
          }
          if (this.current > 3 && this.current < this.total - 2) {
            str += '<li>首页</li>'
            for (let i = current - 2; i <= current + 2; i++) {
              str += i == this.current ? `<li class="current">${this.current}</li>` : `<li>${i}</li>`
            }
            str += '<li>末页</li>'
          }
          if (this.current >= this.total - 2) {
            str += '<li>首页</li>'
            for (let i = this.total - 4; i <= this.total; i++) {
              str += i == this.current ? `<li class="current">${this.current}</li>` : `<li>${i}</li>`
            }
          }
        }
        return str;
      }

      function val(current) {
        if (arguments.length === 0) return this.current;
        if (current < 1 || current > this.total || current === this.current) return;
        this.current = current;
        this.el.innerHTML = this.html();
      }
    }