javaScript购物车案例

以下是纯 javaScript 购物车案例，如有不理解，请留言~

购物车案例所用到的javaScript知识，若哪里不动，可点击查看相应知识点

1.input全选框案例

2.数组对象循环知识点

3.DOM函数节点操作知识点

HTML

<div id="app">
        <div class="header">拼多多购物车</div>
        <!-- 商品部份 -->
      <div class="goods">
       <!--  -->
      </div>
        <!-- 底部结算 -->
        <div class="footer">
            <!-- q全选 -->
            <div class="mainCheck">
                <input type="checkbox"> &nbsp;<span>全选</span>
            </div>
            <!-- 合计 -->
            <div class="totalPrice">
                <p>合计:<span>0￥</span></p>
            </div>
            <!-- 结算 -->
            <div class="btnsPrice">
                <button class="btn">结算：<span class="nums">0</span></button>
            </div>
        </div>
    </div>

CSS

*{
    padding: 0;
    margin: 0;
}

#app {
    max-width: 720px;
    min-width: 360px;
    margin: 0 auto;
    width: 100%;
}
.header {
    background-color: rgb(0, 104, 223);
    color: #fff;
    text-align: center;
    padding: 10px 0;
    width: 100%;
}
.goodsShop {
    width: 100%;
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    margin: 5px 0;
    border-bottom: 1px solid #ccc;
}
.btnImage {
    width: 20%;
    position: relative;
}
.btnImage input {
    position: absolute;
    top: 50%;
    left: 10%;
}
.btnImage img {
    width: 100%;
    padding-left: 15%;
}

.goodsPrice {
    width: 60%;
    position: relative;
    padding-left: 1%;
}
.goodsPrice p {
    font-weight: 700;
    padding-top: 20px;
}
.goodsPrice span {
    position: absolute;
    bottom: 20%;
    color: red;
    font-weight: 700;
}
.addAndSub {
    width: 20%;
    overflow: hidden;
    position: absolute;
    display: flex;
    right: 0;
    bottom: 20px;
}

.addAndSub button {
    width: 25px;
    height: 25px;
    border: 0;
}

.addAndSub input {
    width: 15px;
    height: 25px;
    text-align: center;
    border: 0;
    background-color: aqua;
}

/* footer */
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 720px;
    min-width: 360px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 20px 0;
}
.mainCheck {
    padding-left: 10px;
}
.totalPrice p span {
    color: red;
    font-weight: 700;
    padding-left: 10px;
}
.btnsPrice {
    padding-right: 10px;
}
.btnsPrice button {
    background-color: rgb(0, 104, 223);
    color: #fff;
    padding: 7px 20px;
    margin-top: -10px;
    border-radius: 20px;
    border: 0;
}

JS

window.onload = function() {
	let arr = [{
			imgs: './images/Meme_18.png',
			p: '这是一行字体',
			price: '108',
		},
		{
			imgs: './images/Meme_19.png',
			p: '这是二行字体',
			price: '35',
		},
		{
			imgs: './images/Meme_20.png',
			p: '这是三行字体',
			price: '56',
		},
		{
			imgs: './images/Meme_20.png',
			p: '这是三行字体',
			price: '56',
		},
		{
			imgs: './images/Meme_20.png',
			p: '这是三行字体',
			price: '56',
		},
		
	];
	let list = '';
	for (let i = 0; i < arr.length; i++) {
		list += `
            <div class="goodsShop">
                <div class="btnImage">
                    <input type="checkbox" class="checks">
                    <img src="${arr[i].imgs}" alt="">
                </div>
                <div class="goodsPrice">
                    <p>${arr[i].p}</p>
                    <span class="price"> ${arr[i].price}</span>
                </div>
                <div class="addAndSub">
                    <button class="subtract">-</button>
                    <input type="text" value="1" class="vals">
                    <button class="add">+</button>
                </div>
            </div>
        `
		document.querySelector('.goods').innerHTML = list
	}
	// 单个选中按钮
	let checks = document.querySelectorAll('.checks')
	// 全选按钮
	let allCheck = document.querySelector('.mainCheck input')
	let allSpan = document.querySelector('.mainCheck span')

	function update() {
		// 总价价格 总数量
		let totalPrices = 0;
		let totalNums = 0;
		let goodsShop = document.querySelectorAll('.goodsShop')
		for (let i = 0; i < goodsShop.length; i++) {
			if (goodsShop[i].querySelector('.checks').checked) {
				let num = goodsShop[i].querySelector('.addAndSub input').value
				totalNums += parseInt(num)
				let price = goodsShop[i].querySelector('.price').innerHTML
				totalPrices += parseFloat(price) * num
			}
		}
		document.querySelector('.totalPrice span').innerHTML = totalPrices + '￥'
		document.querySelector('.btnsPrice .nums').innerHTML = totalNums
	}

	// 加+
	let add = document.querySelectorAll('.add')
	add.forEach(function(addes) {
		addes.addEventListener('click', function() {
			let val = addes.parentElement.querySelector('.vals').value
			addes.parentElement.querySelector('.vals').value = parseInt(val) + 1
			update()
		})
	})
	//减-
	let subtract = document.querySelectorAll('.subtract')
	subtract.forEach(function(sub) {
		sub.addEventListener('click', function() {
			let val = sub.parentElement.querySelector('.vals').value
			if (val > 1) {
				sub.parentElement.querySelector('.vals').value = parseInt(val) - 1
				update()
			}
		})
	})

	// 全选
	allCheck.addEventListener('click', function() {
		for (let i = 0; i < checks.length; i++) {
			checks[i].checked = allCheck.checked
			update()
			if (allCheck.checked) {
				allSpan.innerHTML = '取消'
			} else {
				allSpan.innerHTML = '全选'
			}
		}
	})

	// 复选
	for (let i = 0; i < checks.length; i++) {
		checks[i].addEventListener('click', function() {
			for (let j = 0; j < checks.length; j++) {
				if (checks[j].checked === false) {
					allCheck.checked = false
					allSpan.innerHTML = '全选'
					update()
					return
				}
			}
			allCheck.checked = true
			allSpan.innerHTML = '取消'
		})
	}
}