JS实战（自动轮播图+购物车自动计算）

作业内容：
1. 给轮播图加上自动播放功能; 
2. 给购物车加上选择时自动计算功能; 
3. 复习之前的课程,找到短板,整理笔记; 
4. 预习PHP知识,为节后新课做准备.

1. 给轮播图加上自动播放功能

具体生效代码如下：

// 定时翻页
setInterval(() => {
    document.querySelector(".next").dispatchEvent(new Event("click"));
}, 2000);

完整代码经过修正，也贴上：

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);
    // 生成与图片对应大小的铵钮
    createBtns(btnGroup, banners.length);
};
// 生成所有图片
function createImgs(p, len) {
    const frag = document.createDocumentFragment();
    for (let i = 0; i < len; i++) {
        // 创建图片元素
        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);
}
// 生成与图片对应大小的铵钮
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;
        // 给第一个按钮增加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");
}
// 定时翻页
setInterval(() => {
    document.querySelector(".next").dispatchEvent(new Event("click"));
}, 2000);

2. 给购物车加上选择时自动计算功能;

// 三句代码实现：当选择某个商品或去掉某个商品时， 能自动计算
// 第一句在checkAll.onchange里加上一个autoCalculate()，即下面代码第11行
// 第二句在checkItems.onchange里加上一个autoCalculate()，即下面代码第16行
// 最后一句在计算的函数里，添加一条判断语句，即下面代码第37行。判断前面的check如果没勾上，就不纳入计算

// 全选复选框
const checkAll = document.querySelector("#check-all");
const checkItems = document.getElementsByName("item");
// change: 当控件中的值发生变化时触发
// 将全选按钮的状态，赋值给下面所有的商品的checkbox
checkAll.onchange = function (ev) {
    checkItems.forEach(function (item) {
        item.checked = ev.target.checked;
    });
    autoCalculate();
};
checkItems.forEach(function (item) {
    item.onchange = function (ev) {
        autoCalculate();
        //只有全部选中才更新全选按钮的状态
        checkAll.checked = [...checkItems].every(function (item) {
            return item.checked;
        });
    };
});
// 自动计算
// 所有的计算，都是基于数量的变化
const numInput = document.querySelectorAll('input[type="number"]');
numInput.forEach(function (input) {
    input.onchange = autoCalculate;
});
function autoCalculate() {
    // 1. 获取每个商品的金额： 数量 * 单价
    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. 计算出每个商品的金额(数组)
    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. 总数量
    let sum = numArr.reduce(function (prev, curr) {
        return prev + curr;
    });
    // 5. 将所有数据渲染到页面中
    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;
// 作业 ：  当选择某个商品或去掉某个商品时， 能自动计算

3. 预习和复习相关部分已经在陆续进行