基础购物车（Javascript）

乐多_L

已于 2024-06-18 17:21:53 修改

阅读量425

点赞数 6

文章标签： javascript 前端 css

于 2024-06-18 17:19:20 首次发布

本文链接：https://blog.csdn.net/2301_81449444/article/details/139772994

版权

使用Javascript写一个基础购物车，其中包含商品数量加加减减，下面的总价和总数量跟着商品数量变动，还可以自己添加需要的商品。

基础购物车的结构样式如下：

HTML代码：

<body>
		<table border="1px" cellpadding="20px" style="border-collapse: collapse;">
			<thead>
				<tr>
					<th>商品名称</th>
					<th>商品价格</th>
					<th>商品数量</th>
					<th>商品操作</th>
				</tr>
			</thead>
			<tbody id="goods">
				<tr>
					<td>风扇</td>
					<td>24.8￥</td>
					<td><button>-</button> 0 <button>+</button></td>
					<td><button>修改</button> <button>删除</button></td>
				</tr>
			</tbody>
			<footer id="total">
				<tr>
					<td>总价</td>
					<td id="gross"></td>
					<td>总数量</td>
					<td id="qty"></td>
				</tr>
			</footer>
		</table>
		<button class="addition">添加</button>
		<br />
		<!-- 点击添加显示 -->
		<div class="inp" style="display: none;">
			<input class="des" type="text" placeholder="请输入商品名称" />
			<input class="cost" type="number" placeholder="请输入商品价格" />
			<input class="mag" type="number" placeholder="请输入商品数量" />
			<br />
			<button class="append">添加</button>
			<button class="cancel">取消</button>
		</div>
		<!-- 点击修改显示 -->
		<div class="amend" style="display: none;">
			<input class="dess" type="text" placeholder="请输入商品名称" />
			<input class="costs" type="number" placeholder="请输入商品价格" />
			<input class="mags" type="number" placeholder="请输入商品数量" />
			<br />
			<button onclick="appends()">确定</button>
			<button onclick="cancels()">取消</button>
		</div>
		<script src="js/basics.js"></script>
	</body>

css代码：

<style>
			tr,
			td {
				text-align: center;
			}
		</style>

js代码：

// let声明一个变量 为data
let data;
// 声明一个最大的id
let maxid;
// 声明一个变量 为内容下标的id
let a;
// 创建 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
// 使用 open 方法指定要请求的地址、类型和方式
xhr.open('get', 'js/basics.json', true);
// 发送数据
xhr.send();
// 绑定 onreadystatechange 事件，判断 readyState 和 status 的状态
xhr.onreadystatechange = function() {
	// 第一个判断到哪一步，交互流程，有 5 个阶段 从0开始 4表示交互流程完毕 200是状态请求成功
	if (xhr.readyState == 4 && xhr.status == 200) {
		let text = xhr.responseText;
		console.log(text);
		// 将JSON中的数据转化为对象 接收服务器数据 一般为字符串
		data = JSON.parse(text);
		console.log(data);
		// 调用函数
		basic(data);
		// for循环遍历数组
		for (let i = 0; i < data.length; i++) {
			// 判断 当最大的id大于商品最大的id时 最大的id=商品的id
			if (maxid > data[i].id) {
				maxid = data[i].id
			}
		}
	}
};
// 封装函数
function basic(d) {
	let str = '';
	// let 声明一个变量 total为总价 总价从零开始
	let total = 0;
	// let 声明一个变量 amount为总数量 总数量从零开始
	let amount = 0;
	// let声明变量为gross 通过id名在文档中找到gross
	let gross = document.getElementById('gross');
	// let声明变量为qty 通过id名在文档中找到qty
	let qty = document.getElementById('qty');
	for (let i = 0; i < data.length; i++) {
		// +=是先算在等于
		// 总价等于元素的数量*所对应的价格相加
		total += data[i].num * data[i].price;
		// 总数量等于所有数据的数量 并转为整数
		amount += parseInt(data[i].num);
		// str拼接
		str += `<tr>
					<td>${data[i].name}</td>
					<td>${data[i].price}</td>
					<td><button onclick="minus(${i})">-</button> ${data[i].num} <button onclick="add(${i})">+</button></td>
					<td><button onclick="alter(${i})">修改</button> <button onclick="del(${i})">删除</button></td>
				</tr>`;
	}
	// 元素.innerHTML=内容 改变总价的内容 
	gross.innerHTML = total;
	// 元素.innerHTML=内容 改变总数量的内容
	qty.innerHTML = amount;
	// 渲染数据
	document.getElementById('goods').innerHTML = str;
};

// 数量按钮减1
// 减号事件绑定点击事件 传参
function minus(i) {
	// 当商品数量大于0时
	if (data[i].num > 0) {
		// 商品数量减一
		data[i].num--;
	} else {
		// 否则弹窗提示不能为空
		alert("商品数量不能为负")
	};
	// 调用函数
	basic(data);
};

// 数量加1
function add(i) {
	data[i].num++;
	// 调用函数
	basic(data);
};

// 商品删除
// 点击删除按钮 传参 
function del(i) {
	data.splice(i, 1)
	// 调用函数
	basic(data);
};

// 获取添加按钮
let addition = document.getElementsByClassName('addition')[0];
console.log('addition');
// 获取下面的输入框
let inp = document.getElementsByClassName('inp')[0];
console.log('inp');
// 给添加按钮绑定点击事件
addition.onclick = function() {
	// 当点击添加按钮时，下面的输入框出现
	inp.style = "display:block"
};

// 点击取消按钮输入框隐藏
// 获取取消按钮
let cancel = document.getElementsByClassName('cancel')[0];
console.log('cancel');
// 给取消按钮绑定点击事件
cancel.onclick = function() {
	// 点击取消按钮 下面的三个输入框隐藏并清空
	inp.style = "display:none";
	des.value = null;
	cost.value = null;
	mag.value = null;
};

// 添加事件
// 获取向上添加的添加按钮
let append = document.getElementsByClassName('append')[0];
console.log('append');
// 获取三个输入框
let des = document.getElementsByClassName('des')[0];
console.log('des');
let cost = document.getElementsByClassName('cost')[0];
console.log('cost');
let mag = document.getElementsByClassName('mag')[0];
console.log('mag');
// 给添加绑定点击事件
append.onclick = function() {
	console.log(data);
	// 判断内容都不为空且价格大于零 数量大于等于零 并且数量为整数
	if (des.value != '' && cost.value != '' && mag.value != '' && cost.value > 0 && mag.value >= 0 && mag.value %
		1 === 0) {
		// 通过数组尾部添加添加新的内容
		data.push({
			"id": ++maxid,
			"name": des.value,
			"price": parseFloat(cost.value),
			"num": parseInt(mag.value)
		})
		// 添加上以后下面的输入框隐藏并清空
		inp.style = "display:none";
		des.value = '';
		cost.value = '';
		mag.value = '';
		console.log(data);
		basic(data);
	} else {
		alert("信息填写完整")
	};
};

// 修改事件
// 获取修改隐藏的输入框
// 给修改按钮添加点击事件
let amend = document.getElementsByClassName('amend')[0];
// 获取三个输入框
let dess = document.getElementsByClassName('dess')[0];
console.log('dess');
let costs = document.getElementsByClassName('costs')[0];
console.log('costs');
let mags = document.getElementsByClassName('mags')[0];
console.log('mags');
// 给添加绑定点击事件 点击添加出现编辑弹窗
function alter(index) {
	console.log(index);
	amend.style.display = "block";
	// 数据回显
	dess.value = data[index].name;
	costs.value = data[index].price;
	mags.value = data[index].num;
	// a等于数据下标的id
	a = data[index].id;
};
// 编辑添加
// 点击下面输入框里的添加 
function appends() {
	// 判断三个输入框任意一个为空或价格小于0或数量小于0时 提示信息有误
	if (dess.value == '' || costs.value == '' || mags.value == '' || costs.value < 0 || mags.value < 0) {
		alert("信息有误");
		// 否则for循环遍历数组
	} else {
		for (let i = 0; i < data.length; i++) {
			// if判断用户输入的id等于内容的id时 内容修改
			if (data[i].id == a) {
				data[i].name = dess.value;
				data[i].price = costs.value;
				data[i].num = mags.value;
				// 修改完成 输入框隐藏 调用渲染函数
				alert("确认修改");
				amend.style.display = "none";
				basic(data);
				return;
			}
		}
		// 否则提示没有找到相应的数据 输入框隐藏
		amend.style.display = 'none';
	};
};
// 编辑取消
function cancels() {
	// 点击取消，编辑的输入框隐藏，数据重新渲染
	amend.style = "display:none";
	basic(data);
};

json假数据：

[{
	"id":1,
	"name":"风扇",
	"price":"24.8",
	"num":0
	
},{
	"id":2,
	"name":"南街村拌面",
	"price":"5",
	"num":0
	
},{
	"id":3,
	"name":"甜美风小裙子",
	"price":"99.8",
	"num":0
	
},{
	"id":4,
	"name":"空调",
	"price":"1688",
	"num":0
	
},{
	"id":5,
	"name":"维达纸巾",
	"price":"2.5",
	"num":0
	
},{
	"id":6,
	"name":"衬衣",
	"price":"50",
	"num":0
}]