作業(yè)內(nèi)容：
1. 給輪播圖加上自動播放功能; 
2. 給購物車加上選擇時(shí)自動計(jì)算功能; 
3. 復(fù)習(xí)之前的課程,找到短板,整理筆記; 
4. 預(yù)習(xí)PHP知識,為節(jié)后新課做準(zhǔn)備.

1. 給輪播圖加上自動播放功能

具體生效代碼如下：

// 定時(shí)翻頁
setInterval(() => {
    document.querySelector(".next").dispatchEvent(new Event("click"));
}, 2000);

完整代碼經(jīng)過修正，也貼上：

const banners = [
    "images/banner_1.jpg",
    "images/banner_2.jpg",
    "images/banner_3.jpg",
    "images/banner_4.jpg",
];
const imgGroup = document.querySelector(".container>.img-group");
const btnGroup = document.querySelector(".container>.btn-group");
//頁面加載完，生成圖片和按鈕
window.onload = () => {
    // 生成所有圖片
    createImgs(imgGroup, banners.length);
    // 生成與圖片對應(yīng)大小的銨鈕
    createBtns(btnGroup, banners.length);
};
// 生成所有圖片
function createImgs(p, len) {
    const frag = document.createDocumentFragment();
    for (let i = 0; i < len; i++) {
        // 創(chuàng)建圖片元素
        const img = document.createElement("img");
        img.src = banners[i];
        img.dataset.index = i + 1;
        // 給第一張圖片加上active樣式
        if (i === 0) img.classList.add("active");
        frag.append(img);
    }
    p.append(frag);
}
// 生成與圖片對應(yīng)大小的銨鈕
function createBtns(p, len) {
    const frag = document.createDocumentFragment();
    for (let i = 0; i < len; i++) {
        const btn = document.createElement("span");
        btn.dataset.index = i + 1;
        // 給第一個(gè)按鈕增加active樣式
        if (i === 0) btn.classList.add("active");
        // 為按鈕添加onclick事件
        btn.onclick = showImgs;
        frag.append(btn);
    }
    p.append(frag);
}
// 按鈕事件
function showImgs(ev) {
    const index = ev.target.dataset.index;
    [...imgGroup.children].forEach((item) => item.classList.remove("active"));
    [...btnGroup.children].forEach((item) => item.classList.remove("active"));
    ev.target.classList.add("active");
    [...imgGroup.children].filter((item) => item.dataset.index === index)[0].classList.add("active");
}
// 翻頁，向前-1，向后1
function nextImg(ev, direction) {
    ev.preventDefault();
    let index = imgGroup.querySelector(".active").dataset.index;
    let count = banners.length;
    direction > 0 ? ++index : --index;
    index === 0 ? (index = count) : index;
    index > count ? (index = 1) : index;
    [...imgGroup.children].forEach((item) => item.classList.remove("active"));
    [...btnGroup.children].forEach((item) => item.classList.remove("active"));
    [...imgGroup.children]
        .filter((item) => item.dataset.index === index.toString())[0]
        .classList.add("active");
    [...btnGroup.children]
        .filter((item) => item.dataset.index === index.toString())[0]
        .classList.add("active");
}
// 定時(shí)翻頁
setInterval(() => {
    document.querySelector(".next").dispatchEvent(new Event("click"));
}, 2000);

2. 給購物車加上選擇時(shí)自動計(jì)算功能;

// 三句代碼實(shí)現(xiàn)：當(dāng)選擇某個(gè)商品或去掉某個(gè)商品時(shí)， 能自動計(jì)算
// 第一句在checkAll.onchange里加上一個(gè)autoCalculate()，即下面代碼第11行
// 第二句在checkItems.onchange里加上一個(gè)autoCalculate()，即下面代碼第16行
// 最后一句在計(jì)算的函數(shù)里，添加一條判斷語句，即下面代碼第37行。判斷前面的check如果沒勾上，就不納入計(jì)算

// 全選復(fù)選框
const checkAll = document.querySelector("#check-all");
const checkItems = document.getElementsByName("item");
// change: 當(dāng)控件中的值發(fā)生變化時(shí)觸發(fā)
// 將全選按鈕的狀態(tài)，賦值給下面所有的商品的checkbox
checkAll.onchange = function (ev) {
    checkItems.forEach(function (item) {
        item.checked = ev.target.checked;
    });
    autoCalculate();
};
checkItems.forEach(function (item) {
    item.onchange = function (ev) {
        autoCalculate();
        //只有全部選中才更新全選按鈕的狀態(tài)
        checkAll.checked = [...checkItems].every(function (item) {
            return item.checked;
        });
    };
});
// 自動計(jì)算
// 所有的計(jì)算，都是基于數(shù)量的變化
const numInput = document.querySelectorAll('input[type="number"]');
numInput.forEach(function (input) {
    input.onchange = autoCalculate;
});
function autoCalculate() {
    // 1. 獲取每個(gè)商品的金額： 數(shù)量 * 單價(jià)
    const numbers = document.querySelectorAll('input[type="number"]');
    const numArr = [...numbers].map(function (num) {
        if (!num.parentNode.parentNode.getElementsByClassName("item")[0].checked) return 0;
        return num.value * 1;
    });
    const prices = document.querySelectorAll("tbody .price");
    const priceArr = [...prices].map(function (num) {
        return num.textContent * 1;
    });
    // 2. 計(jì)算出每個(gè)商品的金額(數(shù)組)
    const amountArr = [priceArr, numArr].reduce(function (prev, curr) {
        return prev.map(function (item, key) {
            return item * curr[key];
        });
    });
    // console.log(amountArr);
    // 3. 總金額
    let total = amountArr.reduce(function (prev, curr) {
        return prev + curr;
    });
    // 4. 總數(shù)量
    let sum = numArr.reduce(function (prev, curr) {
        return prev + curr;
    });
    // 5. 將所有數(shù)據(jù)渲染到頁面中
    document.querySelectorAll(".amount").forEach(function (item, index) {
        item.textContent = amountArr[index];
    });
    document.querySelector("#total-amount").textContent = total;
    document.querySelector("#sum").textContent = sum;
}
window.onload = autoCalculate;
// 作業(yè) ：  當(dāng)選擇某個(gè)商品或去掉某個(gè)商品時(shí)， 能自動計(jì)算

3. 預(yù)習(xí)和復(fù)習(xí)相關(guān)部分已經(jīng)在陸續(xù)進(jìn)行

批改老師：PHPz

批改狀態(tài)：合格

老師批語：