150 lines
5.0 KiB
JavaScript
150 lines
5.0 KiB
JavaScript
const member_list = document.querySelector('.member-list');
|
||
// console.log(member_list);
|
||
const Page = document.querySelector('.pagination span');
|
||
let currentPage = Page.textContent.slice(1,2);
|
||
// let currentPage = 2;
|
||
const totalPages = Page.textContent.slice(5,6);
|
||
const PageSize = 4;
|
||
const up_btn = document.querySelector('#prev-page');
|
||
const next_btn = document.querySelector('#next-page');
|
||
const user_img = "images/用户头像.jpg";
|
||
const member_content = [
|
||
// 第一页
|
||
{
|
||
name:"张三",
|
||
edu:"学历/职位：本科大三 / 前端组组长",
|
||
major:"专业：计算机科学与技术",
|
||
project:"项目经历：坤班活动管理系统前端开发",
|
||
},
|
||
|
||
{
|
||
name:"李四",
|
||
edu:"学历/职位：硕士二年级 / 后端组负责人",
|
||
major:"专业：软件工程",
|
||
project:"项目经历：AI工具快速开发平台后端架构",
|
||
},
|
||
|
||
{
|
||
name:"王五",
|
||
edu:"学历/职位：本科大四 / UI设计组组长",
|
||
major:"专业：数字媒体技术",
|
||
project:"项目经历：坤班官网视觉设计、硬件设备界面设计",
|
||
},
|
||
|
||
{
|
||
name:"赵六",
|
||
edu:"学历/职位：本科大三 / AI组核心成员",
|
||
major:"专业：人工智能",
|
||
project:"项目经历：AI影视人才匹配平台算法开发",
|
||
},
|
||
|
||
// 第二页
|
||
{
|
||
name:"张三1",
|
||
edu:"学历/职位：本科大三 / 前端组组长",
|
||
major:"专业：计算机科学与技术",
|
||
project:"项目经历：坤班活动管理系统前端开发",
|
||
},
|
||
|
||
{
|
||
name:"李四2",
|
||
edu:"学历/职位：硕士二年级 / 后端组负责人",
|
||
major:"专业：软件工程",
|
||
project:"项目经历：AI工具快速开发平台后端架构",
|
||
},
|
||
|
||
{
|
||
name:"王五3",
|
||
edu:"学历/职位：本科大四 / UI设计组组长",
|
||
major:"专业：数字媒体技术",
|
||
project:"项目经历：坤班官网视觉设计、硬件设备界面设计",
|
||
},
|
||
|
||
{
|
||
name:"赵六4",
|
||
edu:"学历/职位：本科大三 / AI组核心成员",
|
||
major:"专业：人工智能",
|
||
project:"项目经历：AI影视人才匹配平台算法开发",
|
||
}
|
||
|
||
];
|
||
updatePagecontent(currentPage);
|
||
// 0 1 2 3 1
|
||
// 4 5 6 7 2
|
||
// currentPage = 2;
|
||
function updatePagecontent(currentPage){
|
||
member_list.innerHTML = '';
|
||
let start_index = (currentPage-1)*PageSize;
|
||
let end_index = (currentPage*PageSize)-1;
|
||
// const card = document.querySelector('.member-card');
|
||
// const card = document.createElement('div');
|
||
// card.className = 'member-card';
|
||
const user = member_content.slice(start_index,end_index+1);
|
||
|
||
user.forEach(member=>{
|
||
// console.log();
|
||
const card = document.createElement('div');
|
||
card.className = 'member-card';
|
||
card.innerHTML =
|
||
`
|
||
<div class="member-avatar">
|
||
<img src="${user_img}" alt="成员1">
|
||
</div>
|
||
<div class="member-info">
|
||
<h3>${member.name}</h3>
|
||
<p>${member.edu}</p>
|
||
<p>${member.major}</p>
|
||
<p>${member.project}</p>
|
||
</div>
|
||
<div class="member-more"><a href="core_member_detail.html">了解更多</a></div>
|
||
`;
|
||
member_list.appendChild(card);
|
||
});
|
||
next_btn.addEventListener('click',function(){
|
||
if(currentPage != totalPages){
|
||
currentPage++;
|
||
Page.textContent = `第${currentPage}页/共${totalPages}页`;
|
||
up_btn.removeAttribute('disabled');
|
||
console.log(currentPage);
|
||
}
|
||
});
|
||
}
|
||
//上一页
|
||
up_btn.addEventListener('click',function(){
|
||
if(currentPage > 1){
|
||
currentPage--;
|
||
Page.textContent = `第${currentPage}页/共${totalPages}页`;
|
||
next_btn.removeAttribute('disabled');
|
||
updatePagecontent(currentPage);
|
||
console.log(currentPage);
|
||
}else if(currentPage == 1){
|
||
alert("已到达最小页");
|
||
up_btn.setAttribute('disabled','disabled');
|
||
}
|
||
});
|
||
|
||
// 下一页
|
||
next_btn.addEventListener('click',function(){
|
||
if(currentPage != totalPages){
|
||
currentPage++;
|
||
Page.textContent = `第${currentPage}页/共${totalPages}页`;
|
||
up_btn.removeAttribute('disabled');
|
||
updatePagecontent(currentPage);
|
||
console.log(currentPage);
|
||
}else if(currentPage == totalPages){
|
||
alert("已到达最大页");
|
||
next_btn.setAttribute('disabled','disabled');
|
||
}
|
||
});
|
||
|
||
|
||
// <div class="pagination">
|
||
// <!-- <a href="#" class="disabled">上一页</a> -->
|
||
// <button id="prev-page" disabled>上一页</button>
|
||
// <span id="page-info">第1页/共2页</span>
|
||
// <button id="next-page">下一页</button>
|
||
// </div>
|
||
|
||
|
||
|