本文最后更新于 535 天前,其中的信息可能已经有所发展或是发生改变。
介绍
效果
解题思路
不多BB,上代码,写的复杂了点,如有不懂地方的欢迎留言:
// TODO:待补充代码
let data;
const pageText = document.getElementById('pagination');
const listNode = document.getElementById('list');
function renderPageText() {
pageText.innerText = `共 ${maxPage} 页,当前 ${pageNum} 页`
}
window.axios.get('/js/carlist.json').then(d => {
data = d.data;
maxPage = Math.ceil(data.length / 5);
renderList();
renderLeftBtnState();
renderRightBtnState();
})
function fetchPageData() {
return data.slice((pageNum - 1) * 5, pageNum * 5);
}
function renderListNode(element) {
const html = `
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">${element.name}</h5>
<small>${element.price}元</small>
</div>
<p class="mb-1">
${element.description}
</p>
</a>
`;
const newDom = document.createElement('div');
newDom.className = 'list-group';
newDom.innerHTML = html;
document.getElementById('list').appendChild(newDom)
}
function renderList() {
const pageData = fetchPageData();
listNode.innerHTML = '';
pageData.forEach(element => renderListNode(element));
renderPageText();
}
let prev = document.getElementById("prev");
let next = document.getElementById("next");
function renderLeftBtnState() {
if (pageNum <= 1) {
prev.className = 'page-item disabled';
return false;
} else prev.className = 'page-item';
return true;
}
function renderRightBtnState() {
if (pageNum >= maxPage) {
next.className = 'page-item disabled'
return false;
} else next.className = 'page-item';
return true;
}
// 点击上一页
prev.onclick = function() {
// TODO:待补充代码
if (!renderLeftBtnState()) return;
pageNum--;
renderList();
renderLeftBtnState();
renderRightBtnState();
};
// 点击下一页
next.onclick = function() {
// TODO:待补充代码
if (!renderRightBtnState()) return;
pageNum++;
renderList();
renderLeftBtnState();
renderRightBtnState();
};
大佬可以发一下题目吗,我这边学校停电蓝桥杯都取消了😭
稍等 晚上更新 就是不太清楚完整放出来会不会有事hhh 第一次发题解
好的,感谢
已经更新题面了,可以稍微看看,文件发出来我怕被查水表
这个Web原来就是考JS嘛,有样式相关的题目吗
有CSS相关的,在前面几道,文章是倒序排的
那个price不是要取小数点后两位吗
疏忽了 在模板字符串里使用element.price.toFixed(2)即可
这样的话它就会变成6900.00,我用的(price/100).toFixed(2)
大佬可以加个qq发下题目不
可以的 我加你
搜不到你qq,加我154075059
感谢分享,赞一个