145 lines
4.3 KiB
JavaScript
145 lines
4.3 KiB
JavaScript
const content = [
|
|
// <div class="product-card" data-page="1">
|
|
// <div class="product-card-img">
|
|
// <img src="images/内蒙古工业大学白天.jpg" alt="JavaWeb产品">
|
|
// </div>
|
|
// <div class="product-card-info">
|
|
// <h3>JavaWeb</h3>
|
|
// <p>轻量级企业级Web应用开发框架</p>
|
|
// <a href="product_detail.html?type=JavaWeb" class="product-card-btn">查看详情</a>
|
|
// </div>
|
|
// </div>
|
|
// 第一页
|
|
{
|
|
img:"images/内蒙古工业大学白天.jpg",
|
|
product_name:"JavaWeb",
|
|
desc:"轻量级企业级Web应用开发框架",
|
|
},
|
|
|
|
{
|
|
img:"images/内蒙古工业大学白天.jpg",
|
|
product_name:"实验室SaS",
|
|
desc:"云原生实验室全流程数字化管理",
|
|
},
|
|
|
|
{
|
|
img:"images/内蒙古工业大学白天.jpg",
|
|
product_name:"坤班官网",
|
|
desc:"响应式企业官网定制开发",
|
|
},
|
|
|
|
{
|
|
img:"images/内蒙古工业大学白天.jpg",
|
|
product_name:"UE5",
|
|
desc:"虚幻引擎5 3D场景定制开发",
|
|
},
|
|
// 第二页
|
|
{
|
|
img:"images/内蒙古工业大学白天.jpg",
|
|
product_name:"其他",
|
|
desc:"产品描述1",
|
|
},
|
|
|
|
{
|
|
img:"images/内蒙古工业大学白天.jpg",
|
|
product_name:"其他",
|
|
desc:"产品描述2",
|
|
},
|
|
|
|
{
|
|
img:"images/内蒙古工业大学白天.jpg",
|
|
product_name:"其他",
|
|
desc:"产品描述3",
|
|
},
|
|
|
|
{
|
|
img:"images/内蒙古工业大学白天.jpg",
|
|
product_name:"其他",
|
|
desc:"产品描述4",
|
|
},
|
|
];
|
|
|
|
const up_btn = document.querySelector('#prevPage');
|
|
const next_btn = document.querySelector('#nextPage');
|
|
const Page = document.querySelector('.product-pagination #pageInfo');
|
|
let currentPage = Page.textContent.slice(1,2);
|
|
let totalPage = Page.textContent.slice(5,6);
|
|
const PageSize = 4;
|
|
|
|
// <div class="product-card-list" id="productCardList"></div>
|
|
const ProductList = document.querySelector('.product-card-list');
|
|
// console.log(ProductList);
|
|
|
|
// console.log(totalPage);
|
|
// console.log(currentPage);
|
|
// 0 1 2 3 1
|
|
// 4 5 6 7 2
|
|
// 8 9 10 11
|
|
changePage(currentPage);
|
|
function changePage(currentPage){
|
|
ProductList.innerHTML = '';
|
|
let start_index = (currentPage-1)*PageSize;
|
|
let end_index = (currentPage*PageSize)-1;
|
|
const pageContent = content.slice(start_index,end_index+1);
|
|
pageContent.forEach((item, index)=>{
|
|
const product_card = document.createElement('div');
|
|
product_card.classList = 'product-card';
|
|
if(item.product_name=='其他'){
|
|
product_card.innerHTML =
|
|
`
|
|
<div class="product-card-img">
|
|
<img src="${item.img}" alt="${item.product_name}产品">
|
|
</div>
|
|
<div class="product-card-info">
|
|
<h3>${item.product_name}${index+1}</h3>
|
|
<p>${item.desc}</p>
|
|
<a href="product_detail.html?type=${item.product_name}${index+1}" class="product-card-btn">查看详情</a>
|
|
</div>
|
|
`;
|
|
ProductList.appendChild(product_card);
|
|
}else{
|
|
product_card.innerHTML =
|
|
`
|
|
<div class="product-card-img">
|
|
<img src="${item.img}" alt="${item.product_name}产品">
|
|
</div>
|
|
<div class="product-card-info">
|
|
<h3>${item.product_name}</h3>
|
|
<p>${item.desc}</p>
|
|
<a href="product_detail.html?type=${item.product_name}" class="product-card-btn">查看详情</a>
|
|
</div>
|
|
`;
|
|
ProductList.appendChild(product_card);
|
|
}
|
|
|
|
});
|
|
|
|
// 上一页
|
|
up_btn.addEventListener('click',function(){
|
|
if(currentPage>1){
|
|
currentPage--;
|
|
Page.textContent = `第${currentPage}页/共${totalPage}页`;
|
|
next_btn.removeAttribute('disabled');
|
|
changePage(currentPage);
|
|
}else{
|
|
alert("已经达到最小页");
|
|
up_btn.setAttribute('disabled','disabled');
|
|
}
|
|
|
|
});
|
|
|
|
// 下一页
|
|
next_btn.addEventListener('click',function(){
|
|
if(currentPage<totalPage){
|
|
currentPage++;
|
|
Page.textContent = `第${currentPage}页/共${totalPage}页`;
|
|
up_btn.removeAttribute('disabled');
|
|
changePage(currentPage);
|
|
}else{
|
|
alert("已经达到最大页");
|
|
next_btn.setAttribute('disabled','disabled');
|
|
}
|
|
|
|
});
|
|
};
|