JavaScript：通过数据驱动法来写一个简易的购物车

看不懂学不会理不清

已于 2024-03-26 21:02:31 修改

阅读量491

点赞数 9

文章标签： javascript 开发语言 ecmascript

于 2024-03-26 20:56:43 首次发布

本文链接：https://blog.csdn.net/m0_65224643/article/details/137056527

版权

本文介绍了数据驱动的理念，如何通过HTML、CSS和JavaScript实现一个简易购物车功能，包括商品添加、删除、数量调整以及总价计算，展示了数据采集、处理和应用在前端开发中的实际运用。

摘要由CSDN通过智能技术生成

首先，什么是数据驱动呢？

基于精益分析和数据闭环理念，通过业务数据化和数据业务化，采集数据并将数据作为生产资料，通过数据分析和挖掘方法提炼规律、获取洞见，再应用到业务过程中，循环做出正向反馈，促进业务优化，实现以数据为中心进行业务决策和行动。（百度一搜就是）

简单来说就是以数据为中心依据进行决策和行动

介绍完毕，下面是相关代码：

第一步，先用html，css写个的页面


    <!DOCTYPE html>
    <html>
    <head>
		<meta charset="utf-8">
		<title></title>
		<style>
			fieldset{
				width: 840px;
			}
			th,
			table,
			td {
				border: 1px solid black;
				text-align: center;
			}

			table {
				margin-top: 20px;
				width: 840px;
			}
			.bottom{
				float: right;
			}
		</style>
	</head>
	<body>
		<fieldset>
			<legend>购物车</legend>
			商品名称：<input id="gName" />
			商品单价：<input id="gPrice" />
			商品数量：<input id="gNum" />
			<button onclick="add()">加入购物车</button>
			<table>
				<thead>
					<th>全选<input id="checkAll" type="checkbox" onchange="quanxuan()" /></th>
					<th>商品名称</th>
					<th>商品价格</th>
					<th>商品数量</th>
					<th>商品总价</th>
					<th>操作</th>
				</thead>
				<tbody id="tbody"></tbody>
			</table>
			<button onclick="delCheckAll()">删除已选商品</button>
			<div class="bottom">总价：<span id="goodsSum"></span></div>
			<script>
     </body>
</html>

第二步，提供个模板，使渲染的时候可以在页面中体现出来，后续有错误，或者需要修改再对其修改就行。

这里goodList.forEach(item=>{...})就是对goodList这个数组就行遍历，里面的代码就是渲染。

<script>
				let goodList = []
				//渲染
				function render() {
					tbody.innerText = ''
					goodList.forEach(item => {
						var inpStr = item.gcheck == true ?
							`<input type='checkbox' class='chk' onchange='fanxuan("${item.gname}")' checked>` :
							`<input type='checkbox' class='chk' onchange='fanxuan("${item.gname}")'>`
						let tr_ = `<tr>
					<td>${inpStr}</td>
					<td>${item.gname}</td>
					<td>${item.gprice}</td>
					<td>
					<button onclick='jia("${item.gname}")'>+</button>
					<input type='text' value='${item.gnum}'/>
					<button onclick='jian("${item.gname}")'>-</button>
					</td>
					<td>${(item.gprice*item.gnum).toFixed(2)}</td>
					<td><button id='del' onclick='del("${item.gname}")'>删除</button></td>
					</tr>
					`
						tbody.innerHTML += tr_
					})
				}
</script>

然后就是如果你想在购物车里面添加，就是对goodList这个数组的添加，其实整个购物车里面就是对数组相关方法的考察。

           <script>
             //增加
            function add() {
					let bool=false
                    //判断这个数组和输入框里的名字是否相同
					for (var i = 0; i < goodList.length; i++) {
						if(goodList[i].gname==gName.value){
							bool=true
							break
						}
					}
                    //如果不同则用.push将下面的属性和属性值放在goodList里面
					if(!bool){
						goodList.push({
						gname: gName.value,
						gprice: +gPrice.value,
						gnum: +gNum.value,
						gcheck: false
					})
					}else{
                           //如果相同则把输入的个数值加到该数量中
						goodList[i].gnum+= +gNum.value
						sum()
					}
					render()
					checkAll.checked=false
				}
				//删除
				function del(gname) {
					goodList = goodList.filter(item => item.gname != gname)
					
					sum()
					fanxuan()
					render()
					if(goodList.length==0){
						checkAll.checked=false
					}
				}
				//btn加
				function jia(gname) {
					goodList.forEach(item => {
						if (item.gname == gname) {
							item.gnum++
						}
					})
					sum()
					render()
				}
				//btn减
				function jian(gname) {
					goodList.forEach(item => {
						if (item.gname == gname) {
							item.gnum--
						}
					})
					sum()
					render()
				}
				//全选
				function quanxuan() {
					goodList.forEach(item=>{
						item.gcheck=checkAll.checked
					})
					sum()
					render()
				}
				//反向全选
				function fanxuan(gname){
					goodList.forEach(item=>{
						if(item.gname==gname){
							item.gcheck=!item.gcheck
						}
					})
					checkAll.checked=goodList.every(item=>item.gcheck==true)
					sum()
					render()
				}
				//删除已选
				function delCheckAll(){
					goodList= goodList.filter(item=>item.gcheck==false)
					if(goodList.length==0){
						checkAll.checked=false
					}
					sum()
					render()
				}
				//计算总价
				function sum(){
					let sum=0
					goodList.forEach(item=>{
						if(item.gcheck){
							sum+=Number(item.gprice)*Number(item.gnum)
						}
					})
					goodsSum.innerText=sum+'元'
				}
				
				//初始渲染
				window.onload = function() {
					sum()
					render()
				}
</script>