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

这是qklbishe.com第15879 篇笔试面试资料
提供答案分析,通过本文《本题展示了一个分页组件,界面中存在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、不要使用第三方插件-笔试面试资料》可以理解其中的代码原理,这是一篇很好的求职学习资料
本站提供程序员计算机面试经验学习,笔试经验,包括字节跳动/头条,腾讯,阿里,美团,滴滴出行,网易,百度,京东,小米,华为,微软等互联网大厂真题学习背诵。

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

本题展示了一个分页组件,界面中存在id=jsContainer的节点A,系统会随机实例化各种Pagination实例,请按照如下要求补充完成Pagination函数。  1、最多连续显示5页,居中高亮显示current页(如demo1所示)  2、total &lt;= 1 时,隐藏该组件(如demo2所示)  3、如果total&lt;=5,则显示全部页数,隐藏“首页”和“末页”元素(如demo3所示)  4、当current居中不足5页,向后(前)补足5页,隐藏“首页”(“末页”)元素(如demo4和demo5所示)  5、total、current均为正整数,1 &lt;= current &lt;= total  6、当前界面中,节点A为系统执行 new Pagination(节点A,20, 10) 后的展示效果  7、请不要手动修改html和css  8、不要使用第三方插件 区块链毕设学生678652507号
function Pagination(container, total, current) {     this.total = total;     this.current = current;     this.html = html;     this.val = val;     this.el = document.querySelector('.pagination'); //TODO: 创建分页组件根节点     if (!this.el) return;      this.el.innerHTML = this.html();     container.appendChild(this.el);     //返回高亮的结果     this.val();     if (this.total <= 1) {         this.el.className = 'hide'; //TODO: 判断是否需要隐藏当前元素     }       function html() {         //1.如果总页数小于等于1,不需要填充字符串         if (this.total <= 1) return '';          //TODO: 生成组件的内部html字符串         var inHtml = '';         //2.如果总页数在2-5页,只需显示页数,不用显示首页和末页         if (this.total <= 5) {             //范围会在1 ~ this.total             for (var i = 1; i <= this.total; i++) {                 if (i == this.current) {                     inHtml += '<li class="current">' + i + '</li>'                 } else {                     inHtml += '<li>' + i + '</li>'                 }             }         } else {             //3.如果总页数在6页以上             /*** 3.1 高亮页小于等于5 ***/             if (this.current <= 5) {                 /*** 3.1.1 高亮页+2 <= 5,不需要换页 ***/                 //此种情况不会出现首页                 if (this.current + 2 <= 5) {                     //范围会在1 ~ 5                     for (var i = 1; i <= 5; i++) {                         if (i == this.current) {                             inHtml += '<li class="current">' + i + '</li>'                         } else {                             inHtml += '<li>' + i + '</li>'                         }                     }                  } else {                     /*** 3.1.2 高亮页+2 > 5,需要换页 ***/                     //此种情况需要首页                     inHtml += '<li>首页</li>'                     //保持高亮页前后各有2页                     for (var i = this.current - 2; i <= this.current + 2; i++) {                         if (i == this.current) {                             inHtml += '<li class="current">' + i + '</li>'                         } else {                             inHtml += '<li>' + i + '</li>'                         }                     }                 }                 //最后加上末页                 inHtml += '<li>末页</li>'             } else {                 /** 3.2 高亮页大于5 ***/                 /*** 3.2.1 高亮页满足前后都各有两页 ***/                 //此种情况肯定会有首页                 inHtml += '<li>首页</li>'                 //保持高亮页前后各有2页                 if (this.current + 2 <= this.total) {                     for (var i = this.current - 2; i <= this.current + 2; i++) {                         if (i == this.current) {                             inHtml += '<li class="current">' + i + '</li>'                         } else {                             inHtml += '<li>' + i + '</li>'                         }                     }                 } else {                     /*** 3.2.2 高亮页不满足前后都各有两页 ***/                     //范围在 (this.total - 4) ~ this.total                     // 因为this.current + 2 > this.total,要么高亮页是末页,要么高亮页后一页是末页,而首页与末页相差4                     for (var i = this.total - 4; i <= this.total; i++) {                         if (i == this.current) {                             inHtml += '<li class="current">' + i + '</li>'                         } else {                             inHtml += '<li>' + i + '</li>'                         }                     }                 }                 //判断是否需要加上末页                 if (this.current+2 < this.total) {                     inHtml += '<li>末页</li>'                 }              }          }         return inHtml;     }      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();     }; }

今天 09:39:29 回复(0)

文章部分来自互联网,侵权联系删除
www.qklbishe.com

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » 本题展示了一个分页组件,界面中存在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、不要使用第三方插件-笔试面试资料

提供最优质的资源集合

立即查看 了解详情