轮播图自动播放和购物车自动计算的完善

这是课后作业，完整代码太长了，所以只贴作业实现部分。

轮播图自动播放

HTML 代码：

<body>
  <div class="container">
    <!-- 1. 图片组 -->
    <div class="img-group"></div>
    <!-- 2. 和图片数量对应的小按钮 -->
    <div class="btn-group"></div>
    <!-- 3. 向前和向后的翻页按钮 -->
    <div class="skip">
      <a class="prev" href="" onclick="prevImg(event)">&lt;</a>
      <a class="next" href="" onclick="nextImg(event)">&gt;</a>
    </div>
  </div>
</body>

JS 代码：

window.onload = () => {
  // 1. 生成所有图片
  createImgs(imgGroup, banners.length);
  // 2. 生成与图片对应的小按钮
  createBtns(btnGroup, banners.length);
  //作业 ：每2秒自动切换，使用 setInterval + 事件派发器完成
  //******作业开始******
  let id = autoPlay();
  //鼠标移入图片区时停止播放
  document.querySelector(".container").onmouseover = () => {
    clearInterval(id);
  };
  //鼠标移出图片区时重新自动播放
  document.querySelector(".container").onmouseout = () => {
    id = autoPlay();
  };
};
//自动播放函数
function autoPlay() {
  return setInterval(() => {
    const a = document.querySelector(".next");
    a.addEventListener("autoEvent", nextImg);
    a.dispatchEvent(new Event("autoEvent"));
    a.removeEventListener("autoEvent", nextImg);
  }, 2000);
}
//******作业结束******

购物车自动计算的完善部分

// 作业 ：  当选择某个商品或去掉某个商品时， 能自动计算
//******作业开始 1******
//给所有checkbox添加监听事件，点击时能自动重新计算
checkAll.addEventListener("change", autoCalculate);
checkItems.forEach(function (item) {
  item.addEventListener("change", autoCalculate);
});
//******作业结束 1******
function autoCalculate() {
  // 1. 获取每个商品的金额： 数量 * 单价
  const numbers = document.querySelectorAll('input[type="number"]');
  const numArr = [...numbers].map(function (num) {
    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];
    });
  });
  //******作业开始 2******
  // 改造autoCalculate自动计算函数中总金额和总数量的计算过程:
  //因为reduce的index是从1开始，循环次数是n-1次，
  //所以需要单独处理一下checkItems[0]是否选中的情况
  // 3. 总金额
  // let total = amountArr.reduce(function (prev, curr) {
  //   return prev + curr;
  // });
  let total = amountArr.reduce(function (prev, curr, index) {
    if (index == 1) {
      if (!checkItems[0].checked) prev = 0;
    }
    if (checkItems[index].checked) {
      return prev + curr;
    } else {
      return prev;
    }
  });
  // 4. 总数量
  // let sum = numArr.reduce(function (prev, curr) {
  //   return prev + curr;
  // });
  let sum = numArr.reduce(function (prev, curr, index) {
    if (index == 1) {
      if (!checkItems[0].checked) prev = 0;
    }
    if (checkItems[index].checked) {
      return prev + curr;
    } else {
      return prev;
    }
  });
  //******作业结束 2******
  // 5. 将所有数据渲染到页面中
  document.querySelectorAll(".amount").forEach(function (item, index) {
    item.textContent = amountArr[index];
  });
  document.querySelector("#total-amount").textContent = total;
  document.querySelector("#sum").textContent = sum;
}

轮播图自动播放和购物车自动计算的完善

轮播图自动播放和购物车自动计算的完善

轮播图自动播放

购物车自动计算的完善部分

相关文章