【题解】第十三届蓝桥杯Web开发省赛解题思路——课程列表
本文最后更新于 236 天前,其中的信息可能已经有所发展或是发生改变。

介绍

效果

解题思路

不多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();
};
转载请注明出处!本文链接: https://battlehawk233.cn/post/842.html



评论

  1. 阿北
    Windows Chrome 100.0.4896.75
    8月前
    2022-4-09 16:23:28

    大佬可以发一下题目吗,我这边学校停电蓝桥杯都取消了😭

    • 博主
      阿北
      Windows Edge 100.0.1185.36
      8月前
      2022-4-09 16:26:07

      稍等 晚上更新 就是不太清楚完整放出来会不会有事hhh 第一次发题解

      • 阿北
        BATTLEHAWK
        Windows Chrome 100.0.4896.75
        8月前
        2022-4-09 16:28:15

        好的,感谢

        • 博主
          阿北
          Windows Edge 100.0.1185.36
          8月前
          2022-4-09 20:54:50

          已经更新题面了,可以稍微看看,文件发出来我怕被查水表

  2. kaygb
    Windows Edge 100.0.1185.29
    8月前
    2022-4-09 20:26:33

    这个Web原来就是考JS嘛,有样式相关的题目吗

    • 博主
      kaygb
      Windows Edge 100.0.1185.36
      8月前
      2022-4-09 20:39:49

      有CSS相关的,在前面几道,文章是倒序排的

  3. rouzom
    Windows Chrome 86.0.4240.198
    8月前
    2022-4-10 15:54:08

    那个price不是要取小数点后两位吗

    • 博主
      rouzom
      Windows Edge 100.0.1185.36
      8月前
      2022-4-10 16:03:48

      疏忽了 在模板字符串里使用element.price.toFixed(2)即可

      • rouzom
        BATTLEHAWK
        Windows Chrome 86.0.4240.198
        8月前
        2022-4-10 16:06:31

        这样的话它就会变成6900.00,我用的(price/100).toFixed(2)

  4. 墨殇
    Windows Chrome 99.0.4844.84
    8月前
    2022-4-11 15:19:20

    大佬可以加个qq发下题目不

    • 博主
      墨殇
      Windows Edge 100.0.1185.36
      8月前
      2022-4-11 15:46:40

      可以的 我加你

    • 博主
      墨殇
      Windows Edge 100.0.1185.36
      8月前
      2022-4-11 15:48:59

      搜不到你qq,加我154075059

  5. Windows Chrome 104.0.0.0
    3月前
    2022-8-19 15:33:34

    感谢分享,赞一个

发送评论编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇