本题展示了一个分页组件，界面中存在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、不要使用第三方插件
[编程题]分页
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();
};
} 转
发表于 2021-09-09 09:39:29
回复(0)
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.el.className = total <= 1 ? 'hide' : ''; //TODO: 判断是否需要隐藏当前元素
function html() {
if (this.total <= 1) return '';
let start = Math.max(1, this.current - 2)
let end = Math.min(this.total, this.current + 2)
if (start === 1) end = Math.min(5, this.total)
if (end === this.total) start = Math.max(this.total - 4, 1)
let res = ''
if (start !== 1) {
res += `<li>首页</li>`
}
for (let i = start; i <= end; i++) {
if (i !== this.current)
res += `<li>${i}</li>`
else
res += `<li class="current">${i}</li>`
}
if (end !== this.total) {
res += `<li>末页</li>`
}
//TODO: 生成组件的内部html字符串
return res
}
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();
};
}
发表于 2022-05-14 15:17:17
回复(1)
function Pagination(container, total, current) {
this.total = total;
this.current = current;
this.html = html;
this.val = val;
// 创建ul
const ul = document.createElement('ul');
ul.className = 'pagination';
this.el = ul;
this.el.innerHTML = this.html();
if (!this.el) return;
container.appendChild(this.el);
if (total == 0) this.el.className = 'pagination hide'; //TODO: 判断是否需要隐藏当前元素
function html() {
if (this.total <= 1) return '';
const lisArr = [];
let start;
let end;
// start和end的三种情况
if (this.current - 2 >= 1 && this.current + 2 <= this.total) {
// 1.正好current在中间
start = this.current - 2;
end = this.current + 2;
} else if (this.current - 2 < 1) {
// 2. start不满足要求啊，太小了，截断，同时考虑total很小的情况
start = 1;
end = Math.min(this.total, 5);
} else if (this.current + 2 > this.total) {
// 2.end不满足要求，同时totol可能很小
end = this.total;
start = Math.max(this.total - 4, 1);
}
// 到底渲染多少的li，是由start和end来决定的
for (let i = start; i <= end; i++) {
lisArr.push(`<li>${i}</li>`);
}
// 给current添加类名
lisArr[this.current - start] = lisArr[this.current - start].replace('<li>', '<li class="current">')
// 判断是否要显示首页和末页
if (start > 1) lisArr.unshift('<li>首页</li>');
if (end < this.total) lisArr.push('<li>末页</li>');
return lisArr.join('');
}
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();
};
}
发表于 2022-05-18 22:37:47
回复(0)
function Pagination(container, total, current) {
this.total = total;
this.current = current;
this.continues = 5;
this.html = html;
this.val = val;
this.el = document.createElement('ul'); //TODO: 创建分页组件根节点
if (!this.el) return;
this.el.innerHTML = this.html();
container.appendChild(this.el);
this.el.className = this.total <= 1 ?'pagination hide': 'pagination'; //TODO: 判断是否需要隐藏当前元素
function html() {
if (this.total <= 1) return '';
//TODO: 生成组件的内部html字符串
let lis = []
let start = this.current - Math.floor(this.continues/2)
let end = this.current + Math.floor(this.continues/2)
start = start > 0 ? start : 1
end = end <= this.total ? end : this.total
// 考虑边界情况
if(start == 1) {
end = (start + this.continues - 1) > this.total
? this.total : start + this.continues - 1
}
if(end == this.total) {
start = (end - this.continues +1) < 1 ? 1 : end - this.continues +1
}
for (let index = start; index <= end; index++) {
let className = index == this.current ? 'class = "current" ' : ''
let li = `<li ${className}>${index}</li>`
li.innerText = start
lis.push(li)
}
if(start > 1) lis.unshift(`<li>首页</li>`)
if(end < this.total) lis.push(`<li>末页</li>`)
return lis.join('');
}
function val() {
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();
};
}
发表于 2022-04-07 11:01:51
回复(0)
function Pagination(container, total, current) {
this.total = total;
this.current = current;
this.html = html;
this.val = val;
this.el = document.querySelector('.pagination')
if (!this.el) return;
this.el.innerHTML = this.html();
container.appendChild(this.el);
this.el.className = total <= 1 ? 'hide' : ''; //TODO: 判断是否需要隐藏当前元素
function html() {
if (this.total <= 1) return "";
let result = "";
let start = Math.max(1, current - 2);
let end = start + 4;
if(end > total){
end = total
start = end - 4 > 0 ? end - 4 :1
}
if (start !== 1) result += "<li>首页</li>";
for (let i = start; i < end + 1; i++) {
if (i == current) result += "<li class='current'>";
else result += "<li>";
result += i;
result += "</li>";
}
if (end !== total) result += "<li>末页</li>";
//TODO: 生成组件的内部html字符串
return result;
}
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();
}
} 说实话这题看的我有点懵，一开始没理解想干啥，后面看讨论一个一个调才调出来的，唉
发表于 2022-10-12 15:58:25
回复(0)
描述写的是只有个节点A，并且注释也是需要创建一个分页根节点，但是代码提供的信息又像是不需要。不过两种都能通过，还行吧（我这里就新建一个）
function Pagination(container, total, current) {
this.total = total;
this.current = current;
this.html = html;
this.val = val;
this.el = document.createElement('ul');
this.el.className = 'pagination';
this.el.innerHTML = this.html();
container.appendChild(this.el);
this.val();
function html() {
// 只有一页
if (this.total <= 1) {
this.el.classList.add('hide');
return '';
}
var htmlStr = '';
// 小于5页
if (this.total <= 5) {
for (var i = 1; i <= this.total; i++) {
if (i === this.current) {
htmlStr += '<li class="current">' + i + '</li>';
} else {
htmlStr += '<li>' + i + '</li>';
}
}
return htmlStr;
}
// 大于5页
// 当前页小于等于3
if (this.current <= 3) {
for (var i = 1; i <= 5; i++) {
if (i === this.current) {
htmlStr += '<li class="current">' + i + '</li>';
} else {
htmlStr += '<li>' + i + '</li>';
}
}
htmlStr += '<li>末页</li>';
return htmlStr;
}
// 当前大于等于总页数 - 2
if (this.current >= this.total - 2) {
htmlStr += '<li>首页</li>';
for (var i = this.total - 4; i <= this.total; i++) {
if (i === this.current) {
htmlStr += '<li class="current">' + i + '</li>';
} else {
htmlStr += '<li>' + i + '</li>';
}
}
return htmlStr;
}
// 当前页大于3，小于总页数 - 2
htmlStr += '<li>首页</li>';
for (var i = this.current - 2; i < this.current + 3; i++) {
if (i === this.current) {
htmlStr += '<li class="current">' + i + '</li>';
} else {
htmlStr += '<li>' + i + '</li>';
}
}
htmlStr += '<li>末页</li>';
return htmlStr;
}
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();
}
}
发表于 2021-11-11 15:35:07
回复(0)
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.el.className = !this.el.childElementCount ? 'hide' : 'pagination'; //TODO: 判断是否需要隐藏当前元素
function html() {
this.el.innerHTML = '';
if (this.total < 1) return '';
//TODO: 生成组件的内部html字符串
let str = '';
let start = Math.max(1,current - 2);
let end = Math.min(start + 4,total);
if(end - start < 4 && start === 1)
end = Math.min(end + 4 - end + start,total);//4 - end + start
else if(end - start < 4 && end === total)
start = Math.max(start - 4 + end - start,1);
if(end > 5)
str += '<li>首页</li>';
for(let i = start;i <= end;i++){
if(i !== current)
str += `<li>${i}</li>`;
else{
str += `<li class='current'>${i}</li>`
}
}
if(start <= total - 4) str += '<li>末页</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();
};
}
发表于 2023-04-03 10:24:45
回复(0)
function Pagination(container, total, current) {
this.total = total;
this.current = current;
this.html = html;
this.val = val;
this.el = document.createElement('ul'); //TODO: 创建分页组件根节点
if (!this.el) return;
this.el.innerHTML = this.html();
container.appendChild(this.el);
this.el.className = this.total <= 1 ? 'pagination hide' : 'pagination'; //TODO: 判断是否需要隐藏当前元素
//添加点击事件
this.el.onclick = (e) => {
let value = e.target.innerText;
if (value !== '首页' || value !== '末页') {
this.val(parseInt(value),)
} else {
this.val(value === '首页' ? 1 : this.total)
}
};
function html() {
if (this.total <= 1) return '';
let template = ''
let len = this.total <= 5 ? this.total : 5;
//序号开始位置
let start = this.current - 2 <= 0 ? 1 : this.current - 2;
if (this.total <= 5) {
start = 1;
} else if (this.total - 4 < start) {
start = this.total - 4;
}
for (let i = 0, j = start; i < len; i++, j++) {
template += `<li ${j === this.current ? 'class="current"' : ''}>${j}</li>`
}
if (start !== 1) {
template = `<li>首页</li>` + template;
}
if (start + 4 !== this.total) {
template = template + `<li>末页</li>`;
}
//TODO: 生成组件的内部html字符串
return template;
};
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();
};
}
let body = document.querySelector('body')
let page = new Pagination(body, 10, 9)
发表于 2023-03-12 14:26:30
回复(0)
理了一下思路 大致分为两种情况 情况1： 1< total <= 5 情况2： total > 5 无论那种情况设置一个start 一个end 为了后面遍历生成li做准备 情况1的时候比较简单: 这个时候不会显示首页 也不会显示尾页；start = 1, end = total; 情况2的时候比较复杂因为current可能处在页码末尾 或者页码最前面； 1、 最正常的情况肯定是 current + 3 < total 并且 current - 3 > 1; 这个时候 显示首页 显示尾页；start = current - 2, end = current + 2 2、当current - 3 < 1 current可能为 1 2 3 这个时候肯定不会显示首页 这个时候设置end为 5 start = 1 显示尾页标签 3、当current + 3 > total时 比如total为 10 current可能为 8 9 10 这个时候肯定不会显示末页标签 所以设置 end = total start = current - 2 显示首页标签
发表于 2022-12-07 19:50:51
回复(0)
function Pagination(container, total, current) {
this.total = total
this.current = current
this.html = html
this.val = val
this.el = document.createElement("ul")
this.el.classList.add("pagination")
if (!this.el) return
this.el.innerHTML = this.html()
container.appendChild(this.el)
if(this.el.innerHTML=='')
{
this.el.classList.add("hide")
}
function html() {
if (this.total <= 1) return ''
var startId, endId, html = ''
var showStart,showEnd
showStart=false;
showend=false;
if(this.total<=5){
startId = 1
endId = this.total
}else{
if(this.current<=3){
startId = 1
endId = 5
showEnd=true
}else if(this.current>=this.total-2){
startId = this.total-4
endId = this.total
showStart=true
}else{
startId = this.current-2
endId = this.current+2
showEnd=true
showStart=true
}
}
if(showStart){
html += '<li>首页</li>'
}
for (var i = startId; i <= endId; i++) {
if (i == this.current) {
html += '<li class="current">' + i + '</li>'
} else {
html += '<li>' + i + '</li>'
}
}
if(showEnd){
html += '<li>末页</li>'
}
return html
}
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()
}
}
发表于 2022-08-02 10:52:36
回复(0)
function Pagination(container, total, current) {
this.total = total;
this.current = current;
this.html = html;
this.val = val;
this.el = document.getElementsByClassName('pagination')[0]; //TODO: 创建分页组件根节点
if (!this.el) return;
this.el.innerHTML = this.html();
container.appendChild(this.el);
this.el.className = 'pagination hide'; //TODO: 判断是否需要隐藏当前元素
function html() {
if (this.total <= 1) return '';
//TODO: 生成组件的内部html字符串
var inHTML='';
//如果total<=5，则显示全部页数，隐藏“首页”和“末页”元素（如demo3所示）
if (this.total<=5){
for (let i=1;i<=this.total;i++){
if(i==this.current){
inHTML+= '<li class="current">'+this.current+'</li>';
}else{
inHTML+= '<li>'+i+'</li>';
}
}
}
//当current居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素(如demo4和demo5所示)
if(this.total>5){
//current靠左，则添加“末页”
if(this.current-1<=2){
for(let i=1;i<=5;i++){
if(i==this.current){
inHTML+= '<li class="current">'+this.current+'</li>';
}else{
inHTML+= '<li>'+i+'</li>';
}
}
inHTML+='<li>末页</li>'
}
//current靠右，则添加“首页”
if(this.total-this.current<=2){
inHTML+='<li>首页</li>'
for(let i=this.total-4;i<=this.total;i++){
if(i==this.current){
inHTML+= '<li class="current">'+this.current+'</li>';
}else{
inHTML+= '<li>'+i+'</li>';
}
}
}
//current居中，则添加“首页”“末页”
if(this.total-this.current>2&&this.current>3){
inHTML+='<li>首页</li>'
for(let i=this.current-2;i<=this.current+2;i++){
if(i==this.current){
inHTML+= '<li class="current">'+this.current+'</li>';
}else{
inHTML+= '<li>'+i+'</li>';
}
}
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();
};
}
发表于 2022-03-29 17:04:56
回复(0)
其余代码都大同小异，这里就贴html函数啦~
function html() {
var tempHTML = '';if (this.total <= 1) return '';
if (this.total <= 5) { // 总数小于五，1,...,total个，遍历生成即可
for(var i=1;i<=this.total;i++){
if(i === this.current){
tempHTML += '<li class="current">'+i+'</li>';
} else {
tempHTML += '<li>'+i+'</li>';
}
}
} else { // 总数大于5，肯定就要翻页了，重新起算起始坐标
var start; // 页码开始位置
var end; // 页码结束位置
if(this.current<=5){
if(this.current<=3){ // 居中位置小于3，总数却又大于5，那只能展示1-5页了
start = 1;
end = 5;
} else { // 居中位置处于3-5，那么起始位置就从居中位置往前推两位，如果居中位置离总数距离小于2，结束位置即为总数，如果大于2，那么结束位置就由居中位置往后推两位
start = this.current-2;
end = this.total-this.current>2 ? this.current+2 : this.total;
}
} else {
end = this.total-this.current>2 ? this.current+2 : this.total; // 如果居中位置离总数距离小于2，结束位置即为总数，如果大于2，那么结束位置就由居中位置往后推两位
start = end - 4; // 总数和居中位置皆大于五，只需要根据结束位置-4即可得到开始位置
}
for(var i=start;i<=end;i++){ // 遍历生成页码
if(i === this.current){
tempHTML += '<li class="current">'+i+'</li>';
} else {
tempHTML += '<li>'+i+'</li>';
}
}
if(this.current>3){ // 如果居中位置大于3并且总数又大于5，那起始位置肯定大于1，前面一定有首页
tempHTML = '<li>首页</li>' + tempHTML;
}
if(this.total!==end){ // 如果结束位置不为总数且总数又大于5，那肯定有末页
tempHTML += '<li>末页</li>';
}
}
//TODO: 生成组件的内部html字符串
return tempHTML;
}
发表于 2022-02-23 16:01:38
回复(0)
function Pagination(container, total, current) {
this.total = total;
this.current = current;
this.html = html;
this.val = val;
this.el = document.createElement('ul'); //TODO: 创建分页组件根节点
if (!this.el) return;
console.log(this.el);
this.el.innerHTML = this.html();
container.appendChild(this.el);
if (this.total <= 1){
this.el.className = 'pagination hide'; //TODO: 判断是否需要隐藏当前元素
} else{
this.el.className = 'pagination';
}
function html() {
// 2、total <= 1 时，隐藏该组件
if (this.total <= 1) return '';
var htmlstr = '';
// 3、如果total<=5，则显示全部页数，隐藏“首页”和“末页”元素
if (this.total <= 5 && this.total>1){
for(var i=1;i<=this.total;i++){
this.current==i?htmlstr += `<li class="current">${i}</li>` : htmlstr += `<li>${i}</li>`;
}
}else{
// 最多连续显示5页，居中高亮显示current页
if(this.current-2<=1){
for(var i=1;i<=5;i++){
this.current==i?htmlstr += `<li class="current">${i}</li>` : htmlstr += `<li>${i}</li>`;
}
htmlstr = htmlstr + '<li>末页</li>';
}else if(this.current+2>=this.total){
for(var i=this.total-4;i<=this.total;i++){
this.current==i?htmlstr += `<li class="current">${i}</li>` : htmlstr += `<li>${i}</li>`;
}
htmlstr = '<li>首页</li>' + htmlstr;
}else{
for(var i=this.current-2;i<=this.current+2;i++){
this.current==i?htmlstr += `<li class="current">${i}</li>` : htmlstr += `<li>${i}</li>`;
}
htmlstr = '<li>首页</li>' + htmlstr + '<li>末页</li>';
}
}
//TODO: 生成组件的内部html字符串
return htmlstr;
}
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();
};
}
发表于 2022-02-18 14:21:54
回复(0)
不懂 哪里错
测试案例说这个不通过，我log的结果 <li class="current">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>末页</li> 怎么就不对了！
function() { var el = document.getElementById('jsContainer'); el.innerHTML = ''; var total = 7; var current = 1; new Pagination(el, total, current); var ul = el.querySelector('ul'); var li = ul.getElementsByTagName('li'); var result = li[0].innerHTML.trim() === '1' && li[1].innerHTML.trim() === '2' && li[2].innerHTML.trim() === '3' && li[3].innerHTML.trim() === '4' && li[4].innerHTML.trim() === '5' && li[5].innerHTML.trim() === '末页' && li[0].classList.contains('current') && !li[1].classList.contains('current') && !li[2].classList.contains('current') && !li[3].classList.contains('current') && !li[4].classList.contains('current') && !li[5].classList.contains('current'); console.log(result); return result; }
function Pagination(container, total, current) {
this.total = total;
this.current = current;
this.html = html;
this.val = val;
this.el = document.getElementsByClassName("pagination")[0]; //TODO: 创建分页组件根节点
if (!this.el) return;
this.el.innerHTML = this.html();
container.appendChild(this.el);
if(total <= 1) {
this.el.className = 'pagination hide'; //TODO: 判断是否需要隐藏当前元素
}
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();
};
}
this.total = total;
this.current = current;
this.html = html;
this.val = val;
this.el = document.getElementsByClassName("pagination")[0]; //TODO: 创建分页组件根节点
if (!this.el) return;
this.el.innerHTML = this.html();
container.appendChild(this.el);
if(total <= 1) {
this.el.className = 'pagination hide'; //TODO: 判断是否需要隐藏当前元素
}
function html() {
if (this.total <= 1) return '';
var eleHtml = ``
if (this.total <= 5) {
// <li>1</li>
// <li class="current">2</li>
// <li>3</li>
for (var i = 1; i <= this.total; i++) {
var tr = ``
if (i == this.current) {
tr += `<li class="current">${i}</li>`
} else {
tr += `<li>${i}</li>`
}
eleHtml += tr
}
// return eleHtml
} else {
//total>5
if (self.current - 2 < 1) {
for (var i = 1; i <= 5; i++) {
var tr = ``
if (i == this.current) {
tr += `<li class="current">${i}</li>`
} else {
tr += `<li>${i}</li>`
}
eleHtml += tr
}
//不足5个 前面不足，补充后面的
eleHtml += `<li>末页</li>`
// return eleHtml
} else if (self.current + 2 > self.total) {
//后面不够 补充前面
eleHtml += `<li>首页</li>`
for (var i = self.current-4; i <= self.total; i++) {
var tr = ``
if (i == this.current) {
tr += `<li class="current">${i}</li>`
} else {
tr += `<li>${i}</li>`
}
eleHtml += tr
}
} else {
//居中足够
eleHtml += `<li>首页</li>`
for (var i = self.current-2; i <= self.current+2; i++) {
var tr = ``
if (i == this.current) {
tr += `<li class="current">${i}</li>`
} else {
tr += `<li>${i}</li>`
}
eleHtml += tr
}
eleHtml += `<li>末页</li>`
}
}
console.log(eleHtml)
//TODO: 生成组件的内部html字符串
return eleHtml
}
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();
};
}
发表于 2021-11-29 18:31:52
回复(1)
问题信息
通过挑战的用户
查看代码-
2023-06-15 12:16:39
-
2023-06-07 09:01:28
-
2023-06-05 09:42:57
-
2023-06-02 15:58:34 -
2023-06-01 18:06:05
相关试题
-
扫描二维码，关注牛客网
- 意见反馈
-
下载牛客APP，随时随地刷题
扫一扫，把题目装进口袋
- 求职之前，先上牛客
-
扫描二维码，进入QQ群
扫描二维码，关注牛客公众号
- 公司地址：北京市朝阳区北苑路北美国际商务中心K1座一层-北京牛客科技有限公司
- 联系方式：010-60728802 投诉举报电话：010-57596212（朝阳人力社保局）
- 牛客科技© All rights reserved admin@nowcoder.com
- 京ICP备14055008号-4 增值电信业务经营许可证 营业执照 人力资源服务许可证
-
京公网安备
11010502036488号
