本文主要是介绍基础购物车（Javascript），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
使用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=商品的idif (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名在文档中找到grosslet gross = document.getElementById('gross');// let声明变量为qty 通过id名在文档中找到qtylet 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等于数据下标的ida = 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
}]这篇关于基础购物车（Javascript）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
