这是一个简单的购物车页面，使用HTML和JavaScript编写。页面包括一个表格，用于显示用户添加到购物车中的商品，以及商品的名称、价格、数量等信息。同时，在页面底部有一个添加商品的按钮，当用户点击该按钮时，会出现一个输入框，用于输入商品的名称、价格和数量等信息。用户可以通过加减按钮来增加或减少商品的数量，同时，商品的总价和总数量会实时更新并显示在页面底部。用户还可以通过编辑或删除按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>简单的购物车</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 初始化 */
table {
width: 90%;
height: auto;
margin: 10px;
border: 2px #ffff00 solid;
}
/* 表格 */
tr,
th {
text-align: center;
border: 2px #ffff00 solid;
}
/* 表格题 */
tr,
td {
text-align: center;
border: 2px #ffff00 solid;
}
/* 表格内容 */
</style>
</head>
<body>
<!-- 第一步表格标题框架 -->
<table border="1" cellspacing="0" cellpadding="10" id="order">
<!-- 表格；表格边框为1；单元个间距为0；单元格边距为10 -->
<thead id="order">
<!-- 表格标题 -->
<tr>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
<!-- 第二步表格标题 -->
</thead>
<tbody>
<!-- 身体内容 -->
<!-- 设置为空获取内容 -->
</tbody>
<!-- 身体内容详情 -->
<tfoot>
<tr>
<td>总计</td>
<td id="price">金额:<span id="allprice">
</span></td>
<td id="num">数量:<span id="allnum">
</span></td>
<td></td>
</tr>
<!-- 底部总部；金额；数量 -->
</tfoot>
<!-- HTML样式 -->
</table>
<button onclick="isShow()">添加</button>
<!-- 点击要添加的商品；不点按钮平常隐藏 -->
<div class="footer" style="display: none;" id="footer">
<input type="text" id="names" placeholder="商品名称">
<input type="number" id="prices" placeholder="商品价格">
<input type="number" id="nums" placeholder="商品数量">
<button onclick="affirm(event)" id="notarize">确认</button>
<button onclick="cancel(event)" id="abolish">取消</button>
</div>
<script>
//获取添加商品按钮；点击显示商品价格。商品数量。确认。取消；
let thead = document.getElementsByTagName('thead')[0];
//获取到整体表格；
let tbody = document.getElementsByTagName('tbody')[0];
//获取表格的数据的身体；
let tfoot = document.getElementsByTagName('tfoot')[0];
//获取表格内容的底部；
let notarize = document.getElementsByTagName('notarize')[0];
//获取确认按钮
let abolish = document.getElementsByTagName('abolish')[0];
//let num = document.getElementsByTagName('num');
//获取所有的num
let price = document.getElementsByTagName('price')[0];
let footer = document.getElementById('footer');
//获取点击要添加的商品内容
//获取价格
let priceAll = 0;
//获取总价格（priceAll所有）初始为0；
let numAll = 0;
// 获取数据中（numAll所有）的数量
let names = document.getElementById('names').value;
//let获取名字的值；
let prices = document.getElementById('prices').value;
//let获取价格的值；
let nums = document.getElementById('nums').value;
//let获取数量的值；
let index = -1;
//下标为-1；
//获取取消按钮
let data = [{
name: "psp3000索尼掌机1",
//获取商品名称的商品
price: 1458,
// 获取价格的数字
num: 0,
// 获取加减数量的数字
}, {
name: "ikun小公仔2",
//获取商品名称的商品
price: 2.5,
// 获取价格的数字
num: 0,
// 获取加减数量的数字
}, {
name: "cf的屠龙3",
//获取内容的商品名称
price: 388,
// 获取价格的数字
num: 0,
// 获取加减数量的数字
}]
// 获取表格内容的商品;渲染数据
renders();
function renders() {
let str = '';
// 结构为空；
index = -1;
//
for (let i = 0; i < data.length; i++) {
str += `<tr>
<td>${data[i].name}</td>
<td>${data[i].price}</td>
<td>
<button style="width: 20px; display:${data[i].num ==0 ? 'none':'inline-block'}"; onclick ="minus(${i})">-</button>
<span>${data[i].num}</span>
<button style="width: 20px;" onclick ="add(${i})">+</button>
</td>
<td>
<button style="width: 30px;" onclick ="edit(${i})">编辑</button>
<button style="width: 30px;" onclick = "omit(${i})" class= "but(event)">删除</button>
</td>
</tr>
`
// 通过渲染数据来获取原有的数据
}
//通过加号中的事件的$符号i来获取
//减号为0时隐藏
tbody.innerHTML = str;
// 输出到内容str
counts();
}
//加号按钮点击函数功能
function add(i) {
data[i].num++;
//数据的【i】.num自加1；
console.log(data);
//输出点击加号按钮的操作到控制台
renders();
//找到内容的数据
}
//减号按钮点击函数功能
function minus(i) {
data[i].num--;
//数据的【i】.num自减1；
console.log(data);
//输出点击减号按钮的操作到控制台
renders();
//找到内容的数据
}
//函数事件计算总价
function counts() {
priceAll = 0;
//价格初始化为0
numAll = 0;
//数量初始化为0
for (let i = 0; i < data.length; i++) {
priceAll += parseFloat(data[i].num) * parseFloat(data[i].price)
//总价格+=价格数量
//parseFloat转浮点型添加商品时；直接添加
numAll += parseFloat(data[i].num);
//parseFloat转浮点型添加商品时；直接添加
//数量+=数据的数量
}
document.getElementById("allnum").innerHTML = numAll;
//获取总金额和总数量然后输出到html中
document.getElementById("allprice").innerHTML = priceAll;
}
//总价格初始为0；=当数据中的商品【i】价格*数据中的【i】数量
//点击删除函数事件
function omit(i) {
//数组splice(表示从哪里删，删几个；添加的值)；
//从数据中的数组找
data.splice(i, 1);
//数据。增加（i的第一个）；
renders();
//输出
}
//添加商品内容显示
function isShow() {
//再次点击添加时输入框为空
document.getElementById('names').value = "";
//let获取名字的值；是为了获取将输入的数据为空
document.getElementById('prices').value = "";
//let获取价格的值；是为了获取将输入的数据为空
document.getElementById('nums').value = "";
//let获取数量的值；是为了获取将输入的数据为空
footer.style.display = "none";
footer.style.display = "block";
//从id标签获取要增加的商品内容
index = -1;
//
}
//确认添加、、编辑
function affirm() {
console.log(names);
names = document.getElementById('names').value;
//let获取名字的值；是为了获取将输入的数据
prices = document.getElementById('prices').value;
//let获取价格的值；是为了获取将输入的数据
nums = document.getElementById('nums').value;
//let获取数量的值；是为了获取将输入的数据
if (names != '' && prices != '' && nums != '' && nums > -1) {
//&&不等于用于多个判断
let obj = {
name: names,
price: prices,
num: nums,
}
if (index > -1) {
data.splice(index, 1, obj);
//数据。删。项目。1、名字。价格。数量
} else {
data.push(obj)
// 数据。增加（对象）
counts();
// 总价事件
}
renders();
footer.style.display = "none";
// 底部的。样式。显示设置为无
} else {
// 其实是
alert("请完善商品内容,和商品价格,商品数量,为什么你不填呢!");
// 未填写内容时；或数量为负数时就弹出未填写完全的输入框内容
}
}
//获得内容、价格、数量；if判断
//取消事件；
function cancel() {
document.getElementById('names').value = "";
// 点击添加名字按钮为空值
document.getElementById('prices').value = "";
// 点击添加价格按钮为空值
document.getElementById('nums').value = "";
// 点击添加数量按钮为空值
footer.style.display = "none";
}
//确定添加、逻辑
//编辑按钮
function edit(i) {
index = i;
// 项目等于下标i
document.getElementById('names').value = data[i].name;
//获取名字的值；是为了获取将输入的数据
document.getElementById('prices').value = data[i].price;
//获取价格的值；是为了获取将输入的数据
document.getElementById('nums').value = data[i].num;
//获取价格的值；是为了获取将输入的数据
footer.style.display = "block";
//点击之后出现原有的内容
}
</script>
</body>
</html>该代码实现了一个简单的购物车页面，可以添加、修改、删除商品信息，同时可以实时更新商品数量和总价。页面使用HTML、CSS和JavaScript编写，使用数组和对象保存商品信息，使用浮点型作为价格和数量的数据类型，并使用DOM操作实现页面中元素的动态添加和修改等功能。通过该代码的学习，可以为初学者提供一定的参考和指导，了解如何使用JavaScript实现购物车的基本功能。同时，也可以为已有经验的开发人员提供技巧和优化建议。
对已添加的商品进行编辑或删除操作。
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
