129 lines
4.6 KiB
JavaScript
129 lines
4.6 KiB
JavaScript
// 分页
|
||
const prevBtn = document.getElementById('prev-page');
|
||
const nextBtn = document.getElementById('next-page');
|
||
const pageInfo = document.getElementById('page-info');
|
||
const resourceList = document.getElementById('resource-list');
|
||
const Page = document.getElementById('page-info');
|
||
|
||
const totalPages = parseInt(Page.textContent.slice(5,6));
|
||
const pageSize = 3; // 每页显示3个资源
|
||
let currentPage = 1; // 起始页
|
||
|
||
const content = [
|
||
// 第一页内容
|
||
{
|
||
img: "images/内蒙古工业大学夜晚.jpg",
|
||
alt: "开源项目模板1",
|
||
name: "SpringBoot+Vue3开源项目模板",
|
||
desc: "集成权限管理、日志记录、接口文档等基础功能的全栈项目模板，可直接用于快速搭建企业级应用，已开源至Gitee。",
|
||
leader: "张三（后端组负责人）"
|
||
},
|
||
|
||
{
|
||
img: "images/内蒙古工业大学白天.jpg",
|
||
alt: "开源项目模板2",
|
||
name: "SpringBoot+Vue3开源项目模板",
|
||
desc: "集成权限管理、日志记录、接口文档等基础功能的全栈项目模板，可直接用于快速搭建企业级应用，已开源至Gitee。",
|
||
leader: "李四（后端组负责人）"
|
||
},
|
||
|
||
{
|
||
img: "images/内蒙古工业大学夜晚.jpg",
|
||
alt: "开源项目模板3",
|
||
name: "SpringBoot+Vue3开源项目模板",
|
||
desc: "集成权限管理、日志记录、接口文档等基础功能的全栈项目模板，可直接用于快速搭建企业级应用，已开源至Gitee。",
|
||
leader: "王五（后端组负责人）"
|
||
},
|
||
|
||
// 第二页
|
||
{
|
||
img: "images/内蒙古工业大学夜晚.jpg",
|
||
alt: "JavaWeb1",
|
||
name: "JavaWeb1",
|
||
desc: "集成权限管理、日志记录、接口文档等基础功能的全栈项目模板，可直接用于快速搭建企业级应用，已开源至Gitee。",
|
||
leader: "张三（后端组负责人）"
|
||
},
|
||
|
||
{
|
||
img: "images/内蒙古工业大学白天.jpg",
|
||
alt: "JavaWeb2",
|
||
name: "JavaWeb2",
|
||
desc: "集成权限管理、日志记录、接口文档等基础功能的全栈项目模板，可直接用于快速搭建企业级应用，已开源至Gitee。",
|
||
leader: "李四（后端组负责人）"
|
||
},
|
||
|
||
{
|
||
img: "images/内蒙古工业大学夜晚.jpg",
|
||
alt: "JavaWeb3",
|
||
name: "JavaWeb3",
|
||
desc: "集成权限管理、日志记录、接口文档等基础功能的全栈项目模板，可直接用于快速搭建企业级应用，已开源至Gitee。",
|
||
leader: "王五（后端组负责人）"
|
||
}
|
||
];
|
||
|
||
changeContent(currentPage);
|
||
|
||
function changeContent(currentPage){
|
||
// 1.去除资源列表的所有内容
|
||
resourceList.innerHTML = '';
|
||
console.log(currentPage);
|
||
|
||
// 2.获取资源的索引
|
||
// 0 1 2 1
|
||
// 3 4 5 2
|
||
// 6 7 8 3
|
||
let start_index = (currentPage-1) * pageSize;
|
||
let end_index = (pageSize*currentPage)-1;
|
||
let pageContent = content.slice(start_index,end_index+1);
|
||
console.log(pageContent);
|
||
// console.log(pageContent[0].name);
|
||
|
||
// 3. 保证每一页只保留三个资源内容
|
||
pageContent.forEach(items=>{
|
||
// console.log(items.name);
|
||
const resouse_content = document.createElement('div');
|
||
resouse_content.className = 'resource-card';
|
||
resouse_content.innerHTML =
|
||
`
|
||
<div class="resource-img">
|
||
<img src="${items.img}" alt="全栈开发教程文档">
|
||
</div>
|
||
<div class="resource-info">
|
||
<p class='name'>名称：${items.name}</p>
|
||
<p>摘要：${items.desc}</p>
|
||
<p>负责人：${items.leader}</p>
|
||
</div>`
|
||
// 4.生成一个添加一个
|
||
resourceList.appendChild(resouse_content);
|
||
});
|
||
|
||
}
|
||
changeContent(currentPage);
|
||
// console.log(content.slice(0,content.length));
|
||
|
||
//下一页
|
||
nextBtn.addEventListener('click',function(){
|
||
if(currentPage < totalPages){
|
||
currentPage++;
|
||
prevBtn.removeAttribute('disabled');
|
||
pageInfo.textContent = `第${currentPage}页/共${totalPages}页`;
|
||
changeContent(currentPage);
|
||
}else{
|
||
alert("已达到最大页码");
|
||
nextBtn.setAttribute('disabled','disabled');
|
||
}
|
||
});
|
||
|
||
//上一页
|
||
prevBtn.addEventListener('click',function(){
|
||
if(currentPage > 1){
|
||
currentPage--;
|
||
nextBtn.removeAttribute('disabled');
|
||
pageInfo.textContent = `第${currentPage}页/共${totalPages}页`;
|
||
changeContent(currentPage);
|
||
}else{
|
||
alert("已达到最小页码");
|
||
prevBtn.setAttribute('disabled','disabled');
|
||
}
|
||
});
|