javascript实现购物车（完整功能）

发布于：2022-04-17 13:59:07  栏目：技术文档

1）html部分

<div class="box">
    <h3>我的购物车</h3>
    <div class="selectAll">
        <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
        <label for="check-all">全选</label>
    </div>
    <ul class="list">
        <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
        <li>
            <input type="checkbox" onchange="checkItems()" checked />
            <span class="content">手机</span>
            <input type="number" value="1" min="1" class="num" />
            <span class="price">100</span>
            <span class="amount">0</span>
        </li>
        <li>
            <input type="checkbox" onchange="checkItems()" checked />
            <span class="content">电脑</span>
            <input type="number" value="2" min="1" class="num" />
            <span class="price">200</span>
            <span class="amount">0</span>
        </li>
        <li>
            <input type="checkbox" onchange="checkItems()" checked />
            <span class="content">相机</span>
            <input type="number" value="3" min="1" class="num" />
            <span class="price">300</span>
            <span class="amount">0</span>
        </li>
        <li>
            <span>总计:</span>
            <span class="total-num">0</span>
            <span class="total-amount">0</span>
        </li>
    </ul>
    <button class="account">结算</button>
</div>

2）css部分

.box {
    width: 22em;
    height: 2em;
}
.list{
    padding:0;
}
.list>li {
    height: 1.6em;
    background-color: #efefef;
    display: grid;
    grid-template-columns: repeat(5, 3em);
    gap: 1em;
    place-items: center right;
    border-bottom: 1px solid #ccc;
}
.list>li:first-of-type {
    background-color: lightseagreen;
    color: white;
}
.list>li:hover:not(:first-of-type) {
    cursor: pointer;
    background-color: lightcyan;
}
.list>li input[type='number'] {
    width: 3em;
    border: none;
    outline: none;
    text-align: center;
    font-size: 1em;
    background-color: transparent;
}
.list>li:last-of-type span.total-num,
.list>li:last-of-type span.total-amount {
    grid-column: span 2;
    place-self: center right;
    color: lightseagreen;
}
.account {
    float: right;
    background-color: lightseagreen;
    color: white;
    border: none;
    outline: none;
    width: 4.5em;
    height: 1.8em;
}
.account:hover {
    background-color: coral;
    cursor: pointer;
}

3）javascript部分

// 1. 全选
function checkAll() {
   let status = event.target.checked;
   let items = document.querySelectorAll('.list li input[type="checkbox"]');
   items.forEach(item => (item.checked = status));
   autoCalculate();//增加项
}
// 2. 根据用户选择来动态设置全选状态
function checkItems() {
   let items = document.querySelectorAll('.list li input[type="checkbox"]');
   let status = [...items].every(item => item.checked === true);
   document.querySelector('.check-all').checked = status;
   autoCalculate();//增加项
}
// 所有计算都是基于商品数量的变化
const nums = document.querySelectorAll('.num');
// 计算总数量
function getTotalNum(numArr) {
   return numArr.reduce((acc, cur) => acc + cur,0);//修改项
}
// 计算每个商品的金额
function getAmount(numArr, priceArr) {
   return numArr.map((num, index) => num * priceArr[index]);
}
// 计算总金额
function getTotalAmount(amountArr) {
   return amountArr.reduce((acc, cur) => acc + cur,0);//修改项
}
// 自动计算
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);
   document.querySelectorAll('.amount').forEach((amount, index) => (amount.textContent = amountArr[index]));
   //统计被选项数据，以下均为添加项
   let items = document.querySelectorAll('.list li input[type="checkbox"]');
   let cbArr=[...items].map(item=>item.checked);
   let numArr1 =numArr.filter((item,index)=>cbArr[index]==true);
   let priceArr1=priceArr.filter((item,index)=>cbArr[index]==true);
   let amountArr1 = getAmount(numArr1, priceArr1);
   //填充实际数量
   document.querySelector('.total-num').textContent = getTotalNum(numArr1);
   //填充实际金额
   document.querySelector('.total-amount').textContent = getTotalAmount(amountArr1);
}
// 当页面加载的时候自动计算
window.onload = autoCalculate;
// 当数量更新时,自动计算所有数据
nums.forEach(num => (num.onchange = autoCalculate));

相关推荐