使用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
}]
