web写一个好一点的购物车代码
时间: 2024-02-12 16:08:34 浏览: 29
好的,以下是一个更完整的购物车代码,包括商品的添加、删除、修改数量、计算总价等功能:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.fa {
color: #bfbfbf;
cursor: pointer;
margin-right: 10px;
}
.fa:hover {
color: #ff6666;
}
.total {
text-align: right;
margin-bottom: 20px;
}
.total span {
font-weight: bold;
font-size: 20px;
}
.btn {
background-color: #ff6666;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="cartItems">
</tbody>
</table>
<div class="total">
<span>总计:<span id="totalPrice">0.00</span>元</span>
</div>
<button class="btn" id="checkoutBtn">结算</button>
</div>
<!-- 引入 jQuery 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 加载购物车数据
loadCart();
// 绑定添加商品按钮的点击事件
$('#addBtn').click(function() {
var name = $('#nameInput').val();
var price = $('#priceInput').val();
var qty = $('#qtyInput').val();
addItem(name, price, qty);
});
// 绑定删除按钮的点击事件
$('#cartItems').on('click', '.fa-trash', function() {
var row = $(this).closest('tr');
var id = row.data('id');
deleteItem(id);
});
// 绑定数量输入框的 change 事件
$('#cartItems').on('change', '.qtyInput', function() {
var qty = $(this).val();
var row = $(this).closest('tr');
var id = row.data('id');
updateQty(id, qty);
});
// 绑定结算按钮的点击事件
$('#checkoutBtn').click(function() {
alert('结算成功,总计:' + $('#totalPrice').text() + '元');
clearCart();
});
});
// 加载购物车数据
function loadCart() {
var cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
var total = 0;
cartItems.forEach(function(item) {
var row = $('<tr>').data('id', item.id);
row.append($('<td>').text(item.name));
row.append($('<td>').text(item.price));
row.append($('<td>').append($('<input>').attr('type', 'number').addClass('qtyInput').val(item.qty))));
row.append($('<td>').text(item.price * item.qty));
row.append($('<td>').append($('<i>').addClass('fa fa-trash')));
$('#cartItems').append(row);
total += item.price * item.qty;
});
$('#totalPrice').text(total.toFixed(2));
}
// 添加商品到购物车
function addItem(name, price, qty) {
var cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
var id = cartItems.length + 1;
var item = {
id: id,
name: name,
price: parseFloat(price),
qty: parseInt(qty)
};
cartItems.push(item);
localStorage.setItem('cartItems', JSON.stringify(cartItems));
var row = $('<tr>').data('id', id);
row.append($('<td>').text(name));
row.append($('<td>').text(price));
row.append($('<td>').append($('<input>').attr('type', 'number').addClass('qtyInput').val(qty))));
row.append($('<td>').text(price * qty));
row.append($('<td>').append($('<i>').addClass('fa fa-trash')));
$('#cartItems').append(row);
var total = parseFloat($('#totalPrice').text());
total += price * qty;
$('#totalPrice').text(total.toFixed(2));
}
// 删除购物车中的商品
function deleteItem(id) {
var cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
var index = cartItems.findIndex(item => item.id == id);
var item = cartItems[index];
cartItems.splice(index, 1);
localStorage.setItem('cartItems', JSON.stringify(cartItems));
var total = parseFloat($('#totalPrice').text());
total -= item.price * item.qty;
$('#totalPrice').text(total.toFixed(2));
var row = $('#cartItems tr[data-id=' + id + ']');
row.remove();
}
// 更新购物车中的商品数量
function updateQty(id, qty) {
var cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
var item = cartItems.find(item => item.id == id);
var diff = qty - item.qty;
item.qty = qty;
localStorage.setItem('cartItems', JSON.stringify(cartItems));
var total = parseFloat($('#totalPrice').text());
total += item.price * diff;
$('#totalPrice').text(total.toFixed(2));
var row = $('#cartItems tr[data-id=' + id + ']');
row.find('.qtyInput').val(qty);
row.find('td:last-child').text(item.price * qty);
}
// 清空购物车
function clearCart() {
localStorage.removeItem('cartItems');
$('#cartItems').empty();
$('#totalPrice').text('0.00');
}
</script>
</body>
</html>
```
该页面包括商品列表、总计金额和结算按钮。每行商品信息包括商品名称、单价、数量、小计和删除按钮。可以通过添加、删除、修改数量来操作购物车中的商品。购物车数据通过 localStorage 存储,可以在页面刷新后仍然保留。在结算按钮被点击时,会弹出结算成功的提示框,并清空购物车。
这里使用了 jQuery 库,可以通过 CDN 引入。