购物车单选计算
16lz
2022-04-16
购物车单选判断
1.图片效果
2.代码
<script>
// 1. 全选
function checkAll() {
// 1. 全选按钮状态
let status = event.target.checked;
// console.log(status);
// 2. 根据状态动态设置所有商品的状态
let items = document.querySelectorAll(
'.list li input[type="checkbox"]'
);
items.forEach((item) => (item.checked = status));
setTimeout(autoCalculate, 100);
}
// 2. 根据用户选择来动态设置全选状态
function checkItems() {
// 1. 拿到全部商品
let items = document.querySelectorAll(
'.list li input[type="checkbox"]'
);
setTimeout(autoCalculate, 100);
// 2. 判断状态,只有全部被选择,才需要设置全选为true, array.every
let status = [...items].every((item) => item.checked === true);
document.querySelector(".check-all").checked = status;
}
let items = document.querySelectorAll('.list li input[type="checkbox"]');
function getChoice(numArr) {
return numArr.map((num, index) => {
//判断商品是否被选中 选中的话返回正常数组 否则返回0
if (items[index].checked === false) {
return (num = 0);
} else {
return num;
}
});
}
const nums = document.querySelectorAll(".num");
// 1. 计算总数量
function getTotalNum(numArr) {
//将参数传到getChoice函数里面进行判断 再返回值
numArr = getChoice(numArr);
return numArr.reduce((acc, cur) => acc + cur);
}
// 2. 计算每个商品的金额
function getAmount(numArr, priceArr) {
// 金额 = 数量 * 单价
return numArr.map((num, index) => num * priceArr[index]);
}
// 3. 计算总金额
function getTotalAmount(amountArr) {
//将参数传到getChoice函数里面进行判断 再返回值
amountArr = getChoice(amountArr);
return amountArr.reduce((acc, cur) => acc + cur);
}
// 4. 自动计算
function autoCalculate() {
// 商品数量数组
const numArr = [...nums].map((num) => parseInt(num.value));
// 单价数组
const prices = document.querySelectorAll(".price");
const priceArr = [...prices].map((price) =>
parseInt(price.textContent)
);
// 金额数组
const amountArr = getAmount(numArr, priceArr);
// 总数量
console.log(getTotalNum(numArr));
document.querySelector(".total-num").textContent = getTotalNum(numArr);
// 总金额
document.querySelector(".total-amount").textContent =
getTotalAmount(amountArr);
// 为每个商品填充金额
document
.querySelectorAll(".amount")
.forEach((amount, index) => (amount.textContent = amountArr[index]));
}
// 当页面加载的时候自动计算
window.onload = autoCalculate;
// 当数量更新时,自动计算所有数据
nums.forEach((num) => (num.onchange = autoCalculate));
// 作业 : 只计算选中商品的金额,同时更新总数量和总金额
</script>
更多相关文章
- 购物车实例演示
- Android中SensorManager.getRotationMatrix函数:计算出旋转矩阵,
- js编程学习之实战购物车
- 计算-金额
- 双色球抽奖、选项卡、购物车(实现不勾选商品不计算价格)
- 选择器权重,伪类选择器计算
- 购物车(计算选中商品)
- Android(安卓)Studio长方体表面积计算器(双Activity)
- Android计算地图上两点距离