轮播图自动播放，购物车自动计算

轮播图自动播放

HTML
 <div class="container">
      <div class="img-group"></div>
      <div class="btn-group"></div>
      <div class="skip">
        <a class="prev">&lt;</a>
        <a class="next">&gt;</a>
      </div>
    </div>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
.container {
  width: 65.5em;
  height: 15em;
  margin: 1em auto;
  position: relative;
}
.container:hover {
  cursor: pointer;
}
.container > .img-group img {
  width: 100%;
  height: 100%;
  border-radius: 0.5em;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}
.container > .img-group img.active {
  display: block;
}
.container > .btn-group {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* 水平居中 */
  text-align: center;
}
.container > .btn-group span {
  display: inline-block;
  padding: 0.5em;
  margin: 0 0.2em;
  background-color: #fff;
  border-radius: 50%;
}
.container > .btn-group span:hover {
  cursor: pointer;
}
.container > .btn-group .active {
  background-color: #020;
}
.container .skip a {
  position: absolute;
  width: 2.5rem;
  height: 4rem;
  line-height: 5rem;
  text-align: center;
  opacity: 0.5;
  top: 9rem;
  font-weight: lighter;
  font-size: 1rem;
  background-color: #dd5;
}
.container .skip .prev {
  left: 0;
}
.container .skip .next {
  right: 0;
}
.container .skip *:hover {
  opacity: 0.8;
  color: #303;
}

JavaScript

class Swiper {
    constructor(imgs, code, imgcode, btncode) {
      this.imgs = imgs;
      this.code = code;
      this.imgcode = imgcode;
      this.btncode = btncode;
      this.next = null;
      this.prev = null;
      this.timer = null;
      this.clickEvent = new Event("click");
    }
    init() {
      this.next = document.querySelector(".skip .next");
      this.prev = document.querySelector(".skip .prev");
      this.next.addEventListener("click", () => this.nextImg());
      this.prev.addEventListener("click", () => this.prevImg());
      this.createImgs(this.imgcode, this.imgs.length);
      this.createBtns(this.btncode, this.imgs.length);
      this.autoPlay();
      this.code.addEventListener("mouseover", () => this.stopPlay());
      this.code.addEventListener("mouseout", () => this.autoPlay());
    }
    createImgs(parent, length) {
      const frag = document.createDocumentFragment();
      for (let i = 0; i < length; i++) {
        const img = document.createElement("img");
        img.src = this.imgs[i];
        img.alt = `banner${i + 1}`;
        img.dataset.index = `${i + 1}`;
        if (i === 0) img.classList.add("active");
        frag.append(img);
      }
      parent.append(frag);
    }
    createBtns(parent, length) {
      const frag = document.createDocumentFragment();
      for (let i = 0; i < length; i++) {
        const span = document.createElement("span");
        span.dataset.index = `${i + 1}`;
        if (i === 0) span.classList.add("active");
        span.onclick = (ev) => this.showImgs(ev);
        frag.append(span);
      }
      parent.append(frag);
    }
    showImgs(ev) {
      const imgArr = this.imgcode.querySelectorAll("img");
      const btnArr = this.btncode.querySelectorAll("span");
      [btnArr, imgArr].forEach((items) => {
        items.forEach((item) => {
          if (item.classList.contains("active"))
            item.classList.remove("active");
        });
        ev.target.classList.add("active");
        imgArr.forEach((img) => {
          if (ev.target.dataset.index === img.dataset.index)
            img.classList.add("active");
        });
      });
    }
    prevImg() {
      const currentImg = this.imgcode.querySelector("img.active");
      const currentBtn = this.btncode.querySelector("span.active");
      currentImg.classList.remove("active");
      currentBtn.classList.remove("active");
      const prevImg = currentImg.previousElementSibling;
      const prevBtn = currentBtn.previousElementSibling;
      if (prevImg !== null && prevBtn !== null) {
        prevImg.classList.add("active");
        prevBtn.classList.add("active");
      } else {
        this.imgcode.lastElementChild.classList.add("active");
        this.btncode.lastElementChild.classList.add("active");
      }
    }
    nextImg() {
      const currentImg = this.imgcode.querySelector("img.active");
      const currentBtn = this.btncode.querySelector("span.active");
      currentImg.classList.remove("active");
      currentBtn.classList.remove("active");
      const nextImg = currentImg.nextElementSibling;
      const nextBtn = currentBtn.nextElementSibling;
      if (nextImg !== null && nextBtn !== null) {
        nextImg.classList.add("active");
        nextBtn.classList.add("active");
      } else {
        this.imgcode.firstElementChild.classList.add("active");
        this.btncode.firstElementChild.classList.add("active");
      }
    }
    autoPlay() {
      const self = this;
      this.timer = setInterval(() => {
      this.next.dispatchEvent(this.clickEvent, self.nextImg);
      }, 2000);
    }
    stopPlay() {
      clearInterval(this.timer);
    }
  }
  const imgs = [
    "images/1.PNG",
    "images/2.PNG",
    "images/3.PNG",
    "images/3.PNG",
  ];
  const container = document.querySelector(".container");
  const imgGroup = document.querySelector(".container > .img-group");
  const btnGroup = document.querySelector(".container > .btn-group");
  const swiper = new Swiper(imgs, container, imgGroup, btnGroup);
  window.onload = () => swiper.init();

购物车自动计算

HTML
<table>
      <caption>
        购物车
      </caption>
      <thead>
        <th>
          <input type="checkbox" name="checkAll" id="check-all" checked /><label
            for="check-all"
            >全选</label
          >
        </th>
        <th>图片</th>
        <th>品名</th>
        <th>单位</th>
        <th>单价/元</th>
        <th>数量</th>
        <th>金额/元</th>
      </thead>
      <tbody>
        <tr>
          <td>
            <input
              type="checkbox"
              name="item"
              class="item"
              value="SN-1020"
              checked
            />
          </td>
          <td>
            <a href=""><img src="images/p1.png" alt="" /></a>
          </td>
          <td>海盐牛角包</td>
          <td>个</td>
          <td class="price">22</td>
          <td><input type="number" min="1" value="1" /></td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input
              type="checkbox"
              name="item"
              class="item"
              value="SN-1020"
              checked
            />
          </td>
          <td>
            <a href=""><img src="images/p2.png" alt="" /></a>
          </td>
          <td>提拉米苏</td>
          <td>个</td>
          <td class="price">135</td>
          <td><input type="number" min="1" value="1" /></td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input
              type="checkbox"
              name="item"
              class="item"
              value="SN-1030"
              checked
            />
          </td>
          <td>
            <a href=""><img src="images/p3.png" alt="" /></a>
          </td>
          <td>蒜香烤面包</td>
          <td>份</td>
          <td class="price">15</td>
          <td><input type="number" min="1" value="1" /></td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input
              type="checkbox"
              name="item"
              class="item"
              value="SN-1040"
              checked
            />
          </td>
          <td>
            <a href=""><img src="images/p4.png" alt="" /></a>
          </td>
          <td>麻薯</td>
          <td>盒</td>
          <td class="price">215</td>
          <td><input type="number" min="1" value="1" /></td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input
              type="checkbox"
              name="item"
              class="item"
              value="SN-1050"
              checked
            />
          </td>
          <td>
            <a href=""><img src="images/p5.png" alt="" /></a>
          </td>
          <td>巧克力曲奇</td>
          <td>袋</td>
          <td class="price">45</td>
          <td><input type="number" min="1" value="1" /></td>
          <td class="amount">0</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">总计:</td>
          <td id="sum">0</td>
          <td id="total-amount">0</td>
        </tr>
      </tfoot>
    </table>
    <div style="width: 90%; margin: 10px auto">
      <button style="float: right; width: 100px">结算</button>
    </div>
    <script src="demo1.js"></script>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 12px;
}
box {
  font-size: 2.2rem;
}
table {
  border-collapse: collapse;
  width: 90%;
  text-align: center;
  margin: 1rem auto;
  color: #333;
}
table caption {
  margin-bottom: 1rem;
  font-size: 2rem;
}
table th,
table td {
  padding: 0.5rem;
  font-weight: normal;
}
table thead tr:first-of-type {
  background-color: rgb(26, 187, 187);
  height: 4rem;
  color: white;
}
table thead tr:first-of-type:hover {
  opacity: 0.8;
  cursor: pointer;
}
table input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}
/* table tr:nth-of-type(even) {
      background-color: #eee;
    } */
table tbody tr:hover {
  background-color: lightcyan;
  transition: 0.5s;
  cursor: pointer;
}
table input[type="number"] {
  height: 2em;
  width: 4em;
  border: none;
  border-bottom: 1px solid;
  outline: none;
  text-align: center;
}
/* table input[type="number"]:focus {
      background-color: rgb(26, 187, 187);
    } */
tbody img {
  width: 4em;
  transition: all 0.6s;
  cursor: pointer;
}
tbody img:hover {
  transform: scale(4);
}
tfoot tr {
  height: 4rem;
  color: rgb(196, 94, 57);
  background-color: rgb(149, 175, 175);
}
button {
  width: 12rem;
  height: 3rem;
  outline: none;
  border: none;
  background-color: rgb(66, 92, 92);
  color: white;
  letter-spacing: 6px;
}
button:hover {
  background-color: rgb(141, 74, 50);
  transition: 0.2s;
  cursor: pointer;
}
@media screen and (min-width: 400px) {
  html {
    font-size: 10px;
  }
}
@media screen and (min-width: 600px) {
  html {
    font-size: 12px;
  }
}
@media screen and (min-width: 800px) {
  html {
    font-size: 14px;
  }
}
JavaScript
const checkAll = document.querySelector("#check-all");
const checkItems = document.getElementsByName("item");
let isChecked = [];
checkItems.forEach((item) => isChecked.push(item.checked === true ? 1 : 0));
const numInput = document.querySelectorAll('input[type="number"]');
numInput.forEach(function (input) {
  input.onchange = autoCalculate;
});
function autoCalculate() {
  const numbers = document.querySelectorAll('input[type="number"]');
  const numArr = [...numbers].map(function (num) {
    return num.value * 1;
  });
  const sumArr = [numArr, isChecked].reduce(function (prev, curr) {
    return prev.map(function (item, key) {
      return item * curr[key];
    });
  });
  const prices = document.querySelectorAll("tbody .price");
  const priceArr = [...prices].map(function (num) {
    return num.textContent * 1;
  });
  const amountArr = [priceArr, numArr].reduce(function (prev, curr) {
    return prev.map(function (item, key) {
      return item * curr[key];
    });
  });
  const amountAll = [amountArr, isChecked].reduce(function (prev, curr) {
    return prev.map(function (item, key) {
      return item * curr[key];
    });
  });
  let tatal = amountAll.reduce(function (prev, curr) {
    return prev + curr;
  });
  let sum = sumArr.reduce(function (prev, curr) {
    return prev + curr;
  });
  document.querySelectorAll(".amount").forEach(function (item, index) {
    item.textContent = amountArr[index];
  });
  document.querySelector("#total-amount").textContent = tatal;
  document.querySelector("#sum").textContent = sum;
}
window.onload = autoCalculate;
checkItems.forEach((item) => {
  item.onchange = () => {
    checkAll.checked = [...checkItems].every((item) => item.checked);
    autoCheck();
  };
});
function autoCheck() {
  const chItem = document.getElementsByName("item");
  const numCheck = [...chItem].map(function (num) {
    return num.checked === true ? 1 : 0;
  });
  isChecked = numCheck;
  autoCalculate();
}
console.log(isChecked);
checkAll.onchange = (ev) => {
  isChecked = [];
  checkItems.forEach((item) => (item.checked = ev.target.checked));
  checkItems.forEach((item) => isChecked.push(item.checked === true ? 1 : 0));
  if (ev.target.checked) {
    autoCalculate();
  } else {
    document.querySelector("#total-amount").textContent = 0;
    document.querySelector("#sum").textContent = 0;
  }
};