GGSWJKPZ/js/ui.js

(function () {
    let fragment = document.createDocumentFragment();

    // 获取地址栏信息
    let GetQueryString = (name) => {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return "";
    }
    let temp = GetQueryString('m')


    // 获取总数组
    const arrAll = []
    for (let k in objInfo) {
        arrAll.push({
            id: k,
            name: objInfo[k]
        })
    }

    // 开启了分页得到的数组
    let arr = []
    // 总数组分割
    let arrSpile = []


    if (pageOpen) {
        // 数据的总数
        const total = arrAll.length

        // 计算出分页的个数
        const pageSize = Math.ceil(total / pageNum)
        // 生成 分页 指示器 
        const body = document.querySelector('body')
        const pageBox = document.createElement('div');
        pageBox.classList.add('pageBox')
        for (let i = 0; i < pageSize; i++) {
            const pageBoxSon = document.createElement('div');
            pageBoxSon.innerHTML = i + 1
            pageBox.appendChild(pageBoxSon)

            // 当前的裁剪数据-联合数组类型
            arrSpile.push(arrAll.slice(i * pageNum, (i + 1) * pageNum))
        }
        body.appendChild(pageBox)

        // 为分页绑定点击事件
        const pageDomSonAll = document.querySelectorAll('.pageBox div')
        pageDomSonAll.forEach((v, i) => {
            v.addEventListener('click', () => {
                pageDomCreateFu(i)
            })
        })

    } else arr = arrAll




    // 向页面创建元素
    const pageDomCreateFu = (acNum) => {

        if (pageOpen) {
            arr = arrSpile[acNum]
            //高亮当前
            const pageDomSonAll = document.querySelectorAll('.pageBox div')

            pageDomSonAll.forEach(v => {
                v.classList.remove('active')
            })
            pageDomSonAll[acNum].classList.add('active')
        }

        let ul = document.querySelector('.con');
        ul.innerHTML = ''

        arr.forEach(v => {
            let li = document.createElement('li');
            let divWrap = document.createElement('div');
            let a = document.createElement('a');
            let div = document.createElement('div');
            let p = document.createElement("p");
            divWrap.classList.add('case');
            a.classList.add('link-a');
            // 判断地址栏有没有参数，有的话就跳Model2，没有logo
            if (temp) a.href = `Model3${temp}.html?m=${v.id}`;
            else a.href = `Model3.html?m=${v.id}`;
            div.classList.add('card-img');
            div.style = `background-image: url(images/${v.id}.jpg)`;
            p.innerHTML = v.name;
            a.appendChild(div);
            divWrap.appendChild(a);
            li.appendChild(divWrap);
            li.appendChild(p);
            fragment.appendChild(li);
        })
        ul.appendChild(fragment);
    }

    pageDomCreateFu(0)


})()