Heim > Artikel > Web-Frontend > JavaScript implementiert einen einfachen Warenkorb
JavaScript implementiert einen einfachen Warenkorb
- WBOYOriginal
- 2023-05-21 12:16:072331Durchsuche
Vorwort
Mit der allmählichen Entwicklung des E-Commerce-Geschäfts ist der Warenkorb zu einer der wesentlichen Funktionen jeder E-Commerce-Website geworden. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript einen einfachen Warenkorb implementieren, einschließlich grundlegender Funktionen wie dem Hinzufügen von Produkten, dem Löschen von Produkten und dem Leeren des Warenkorbs.
HTML-Struktur
Werfen wir zunächst einen Blick auf die grundlegende HTML-Struktur der Warenkorbseite. Hier verwenden wir eine Tabelle zur Anzeige der Artikel im Warenkorb und verwenden JavaScript, um Tabellenzeilen dynamisch zu generieren.
<!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>JavaScript-Code
Als nächstes schreiben wir JavaScript-Code, um verschiedene Vorgänge des Warenkorbs abzuschließen. Wir definieren zunächst einen Cart-Konstruktor zur Darstellung des Warenkorbobjekts und fügen einige gängige Methoden hinzu. Die spezifische Implementierung ist wie folgt: Cart 构造函数来代表购物车对象，并添加一些常用方法。具体实现如下：
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;
}
};接下来，我们编写一个函数 renderCart
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;
}Als nächstes schreiben wir eine Funktion renderCart, um die Artikel im aktuellen Warenkorb in einer Tabelle zur Anzeige darzustellen. Die spezifische Implementierung ist wie folgt: 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();
};Wenn die Seite geladen wird, erstellen wir schließlich das Warenkorbobjekt und binden alle Ereignisse an die Seitenelemente. Die spezifische Implementierung lautet wie folgt: rrreee
ZusammenfassungDurch die Implementierung des obigen JavaScript-Codes haben wir eine einfache Warenkorbfunktion erfolgreich abgeschlossen. Wir können es auf verschiedene E-Commerce-Websites anwenden, um die Einkaufsfunktion des E-Commerce-Geschäfts einfach zu implementieren. 🎜Das obige ist der detaillierte Inhalt vonJavaScript implementiert einen einfachen Warenkorb. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML-Tag ausblendenNächster Artikel：HTML-Tag ausblenden