背景切换
change-bg.js
var bg_item = document.querySelectorAll(".bg-items>.item");bg_item.forEach(function (item) {item.addEventListener("click", change_bg, false);});function change_bg(e) {url = e.target.src;document.body.style.cssText ="background: url(" + url + ") no-repeat center top;";}
购物车自动结算
select-all.js
/** @format */var selectAllBtn = document.querySelector("#check-all");//获取每个选项的复选框var itemBtns = document.querySelectorAll("input[name=itemId]");//获取所有单价prices = document.querySelectorAll("table>tbody>tr>td:nth-of-type(5)");//获取所有商品的数量numbers = document.querySelectorAll("table>tbody>tr>td>input[type=number]");// 获取商品单价数组var unitprice_array = getArrar(prices, "innerText");// 获取商品数量数组var counts = getArrar(numbers, "value");//初始化 默认为全选状态init();function init() {selectAllBtn.checked = true;checkAll();}//监听全选按钮状态selectAllBtn.addEventListener("change", checkAll, false);//添加状态刷新，当全选按钮状态改变时重新渲染页面selectAllBtn.addEventListener("change", refresh, false);function refresh() {autoCalculate();}//设置复选框的取消和选中状态并添加默认值function checkAll() {itemBtns.forEach(function (btn) {btn.checked = selectAllBtn.checked;if (!selectAllBtn.checked) {btn.parentNode.parentNode.children[5].children.counter.value = 0;} else {btn.parentNode.parentNode.children[5].children.counter.value = 1;}});}itemBtns.forEach(function (btn) {btn.addEventListener("change", checkAllStatus, false);});function checkAllStatus() {//获取兄弟节点value值,实现取消选中自动重新计算item_num = this.parentNode.parentNode.querySelector("td>input[type=number]").value;if (this.checked == false && item_num > 0) {this.parentNode.parentNode.querySelector("td>input[type=number]").value = 0;} else {this.parentNode.parentNode.querySelector("td>input[type=number]").value = 1;}changeStatus();autoCalculate();}//设置复选框状态function changeStatus() {var num = 0;itemBtns.forEach(function (btn) {if (btn.checked == true) {num++;}});// console.log(num);selectAllBtn.checked = itemBtns.length == num;}//将传入伪数组转换为新的数组function getArrar(array, attr_name) {return Array.from(array).map((item) => parseInt(item[attr_name]));}//每个项目的金额var amounts = getAmounts(unitprice_array, counts);//将每个项目的金额渲染到表格中let subtotal = document.querySelectorAll("tbody>tr>td:last-of-type");//forEach的第二个参数为当前item的索引subtotal.forEach((item, index) => (item.innerText = amounts[index]));//计算每个项目的金额，返回一个新的数组function getAmounts(unitprice_array, counts) {let res = [];for (var i = 0; i < counts.length; i++) {let amount = unitprice_array[i] * counts[i];res.push(amount);}return res;}//计算总金额并渲染到页面var totalNum = (document.querySelector("#total-num").innerText = getSum(counts));var totalAmount = (document.querySelector("#total-amount").innerText = getSum(amounts));//使用reduce方法计算数组每项的和function getSum(array) {return array.reduce((total, num) => total + num, 0);}//为数量控件添加change事件numbers.forEach((item) => item.addEventListener("input", autoCalculate));numbers.forEach((item) => item.addEventListener("input", autoSelect));//当input[type=number]值改变时设置复选框选中，重新计算金额function autoSelect() {this.parentNode.parentNode.querySelector("td>input[name=itemId]").checked = true;// 重新计算所有被选中复选框的数量changeStatus();}//自动计算函数function autoCalculate() {counts = getArrar(numbers, "value");amounts = getAmounts(unitprice_array, counts);subtotal.forEach((item, index) => (item.innerText = amounts[index]));totalNum = document.querySelector("#total-num").innerText = getSum(counts);totalAmount = document.querySelector("#total-amount").innerText = getSum(amounts);}
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>购物车全选</title><link rel="stylesheet" href="css/check-all.css" /></head><body><div class="bg-items"><div class='item'> <img src="img/1.jpg" alt=""></div><div class='item'><img src="img/2.jpg" alt=""></div><div class='item'> <img src="img/3.jpg" alt=""></div></div><table><caption>购物车</caption><thead><tr><th><input type="checkbox" name="checkAll" id="check-all" /><labelfor="check-all">全选</label></th><th>ID</th><th>品名</th><th>单位</th><th>单价/元</th><th>数量</th><th>金额/元</th></tr></thead><tbody><tr><td><input type="checkbox" name="itemId" value="SN-1010" /></td><td>SN-1010</td><td>MacBook Pro电脑</td><td>台</td><td>18999</td><td><input type="number" name="counter" value="1" min="1" step="1" /></td><td></td></tr><tr><td><input type="checkbox" name="itemId" value="SN-1020" /></td><td>SN-1020</td><td>iPhone手机</td><td>部</td><td>4999</td><td><input type="number" name="counter" value="2" min="1" step="1" /></td><td></td></tr><tr><td><input type="checkbox" name="itemId" value="SN-1030" /></td><td>SN-1030</td><td>智能AI音箱</td><td>只</td><td>399</td><td><input type="number" name="counter" value="3" min="1" step="1" /></td><td></td></tr><tr><td><input type="checkbox" name="itemId" value="SN-1040" /></td><td>SN-1040</td><td>SSD移动硬盘</td><td>个</td><td>888</td><td><input type="number" name="counter" value="4" min="1" step="1" /></td><td></td></tr><tr><td><input type="checkbox" name="itemId" value="SN-1050" /></td><td>SN-1050</td><td>黄山毛峰</td><td>斤</td><td>999</td><td><input type="number" name="counter" value="5" min="1" step="1" /></td><td></td></tr></tbody><tfoot><tr><td colspan="5">总计:</td><td id="total-num"></td><td id="total-amount"></td></tr><tr><td colspan="7" style="border:none;"><div style=" margin: 10px auto;"><button style="float: right; width: 100px;">结算</button></div></td></tr></tfoot></table><script src="js/change-bg.js"></script><script src="js/select-all.js"></script></body></html>
