Rumah > Artikel > hujung hadapan web > JavaScript melaksanakan troli beli-belah yang mudah
JavaScript melaksanakan troli beli-belah yang mudah
- WBOYasal
- 2023-05-21 12:16:072276semak imbas
Kata Pengantar
Dengan perkembangan beransur-ansur perniagaan e-dagang, troli beli-belah telah menjadi salah satu fungsi penting mana-mana tapak web e-dagang. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan troli beli-belah yang ringkas, termasuk fungsi asas seperti menambah produk, memadamkan produk dan mengosongkan troli beli-belah.
Struktur HTML
Mari kita lihat struktur HTML asas halaman troli beli-belah. Di sini, kami menggunakan jadual untuk memaparkan item dalam troli beli-belah dan menggunakan JavaScript untuk menjana baris jadual secara dinamik.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车示例</title>
</head>
<body>
<h1>购物车</h1>
<table id="cartTable">
<thead>
<tr>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">总价：￥<span id="cartTotalPrice">0</span></td>
</tr>
</tfoot>
</table>
<p>
<button id="clearCart">清空购物车</button>
</p>
<p>
<label>商品名称：</label>
<input type="text" id="productName">
<label>价格：</label>
<input type="text" id="productPrice">
<label>数量：</label>
<input type="text" id="productNumber">
<button id="addProduct">添加商品</button>
</p>
<script src="cart.js"></script>
</body>
</html>Kod JavaScript
Seterusnya, kami menulis kod JavaScript untuk melengkapkan pelbagai operasi troli beli-belah. Kami mula-mula mentakrifkan pembina Cart untuk mewakili objek troli beli-belah dan menambah beberapa kaedah biasa. Pelaksanaan khusus adalah seperti berikut:
function Cart() {
this.cartItems = []; // 存储购物车中的商品
this.totalPrice = 0; // 购物车中所有商品的总价
}
// 清空购物车
Cart.prototype.clear = function() {
this.cartItems = [];
this.totalPrice = 0;
};
// 添加商品到购物车中
Cart.prototype.addProduct = function(productName, productPrice, productNumber) {
// 判断购物车中是否已经存在该商品
for (var i = 0; i < this.cartItems.length; i++) {
if (this.cartItems[i].productName === productName) {
this.cartItems[i].productNumber += productNumber;
this.calculateTotalPrice();
return;
}
}
// 如果购物车中不存在该商品，则将该商品添加到购物车中
var newCartItem = {
productName: productName,
productPrice: productPrice,
productNumber: productNumber
};
this.cartItems.push(newCartItem);
this.calculateTotalPrice();
};
// 从购物车中移除指定商品
Cart.prototype.removeProduct = function(productName) {
for (var i = 0; i < this.cartItems.length; i++) {
if (this.cartItems[i].productName === productName) {
this.cartItems.splice(i, 1);
this.calculateTotalPrice();
return;
}
}
};
// 计算购物车中所有商品的总价
Cart.prototype.calculateTotalPrice = function() {
this.totalPrice = 0;
for (var i = 0; i < this.cartItems.length; i++) {
this.totalPrice += this.cartItems[i].productPrice * this.cartItems[i].productNumber;
}
};Seterusnya, kami menulis fungsi renderCart untuk menjadikan item dalam troli beli-belah semasa ke dalam jadual untuk paparan. Pelaksanaan khusus adalah seperti berikut:
function renderCart() {
var cartTable = document.getElementById("cartTable");
var cartTbody = cartTable.getElementsByTagName("tbody")[0];
// 先清空表格
cartTbody.innerHTML = "";
for (var i = 0; i < cart.cartItems.length; i++) {
var cartItem = cart.cartItems[i];
var productRow = document.createElement("tr");
var productNameCell = document.createElement("td");
var productNameText = document.createTextNode(cartItem.productName);
productNameCell.appendChild(productNameText);
productRow.appendChild(productNameCell);
var productPriceCell = document.createElement("td");
var productPriceText = document.createTextNode(cartItem.productPrice);
productPriceCell.appendChild(productPriceText);
productRow.appendChild(productPriceCell);
var productNumberCell = document.createElement("td");
var productNumberText = document.createTextNode(cartItem.productNumber);
productNumberCell.appendChild(productNumberText);
productRow.appendChild(productNumberCell);
var removeProductCell = document.createElement("td");
var removeProductButton = document.createElement("button");
removeProductButton.innerHTML = "删除";
(function(index) {
removeProductButton.addEventListener("click", function() {
cart.removeProduct(cart.cartItems[index].productName);
renderCart();
});
})(i);
removeProductCell.appendChild(removeProductButton);
productRow.appendChild(removeProductCell);
cartTbody.appendChild(productRow);
}
// 更新总价
var cartTotalPrice = document.getElementById("cartTotalPrice");
cartTotalPrice.innerHTML = cart.totalPrice;
}Akhir sekali, apabila halaman dimuatkan, kami mencipta objek troli beli-belah dan mengikat semua acara pada elemen halaman. Pelaksanaan khusus adalah seperti berikut:
var cart = new Cart();
window.onload = function() {
var addProductButton = document.getElementById("addProduct");
addProductButton.addEventListener("click", function() {
var productName = document.getElementById("productName").value;
var productPrice = parseFloat(document.getElementById("productPrice").value);
var productNumber = parseInt(document.getElementById("productNumber").value);
if (productName && productPrice && productNumber) {
cart.addProduct(productName, productPrice, productNumber);
renderCart();
} else {
alert("商品名称、价格和数量都不能为空！");
}
});
var clearCartButton = document.getElementById("clearCart");
clearCartButton.addEventListener("click", function() {
cart.clear();
renderCart();
});
renderCart();
};Ringkasan
Melalui pelaksanaan kod JavaScript di atas, kami berjaya melengkapkan fungsi troli beli-belah yang mudah. Kita boleh mengaplikasikannya ke pelbagai laman web e-dagang untuk melaksanakan fungsi beli-belah perniagaan e-dagang dengan mudah.
Atas ialah kandungan terperinci JavaScript melaksanakan troli beli-belah yang mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!