文章编号：1522 / 更新时间：2024-12-30 17:36:47 / 浏览：次
css样式： css{margin: 0;padding: 0;box-sizing: border-box; }body {font-family: sans-serif; }.container {width: 100%;max-width: 1000px;margin: 0 auto; }.header {background-color: 333;color: fff;padding: 10px;text-align: center; }.main {display: flex; }.products {width: 60%;padding: 10px; }.products ul {list-style-type: none;display: flex;flex-wrap: wrap; }.products li {width: 25%;margin: 10px; }.product-image {width: 100%;height: 150px;background-color: ccc; }.product-image img {width: 100%;height: 100%;object-fit: contain; }.product-info {padding: 10px; }.product-info h2 {margin-bottom: 5px; }.product-info p {margin-bottom: 10px; }.add-to-cart-btn {background-color: 000;color: fff;padding: 5px 10px;border: none;border-radius: 5px;cursor: pointer; }.cart {width: 40%;padding: 10px; }.cart-items {list-style-type: none;display: flex;flex-direction: column; }.cart-items li {display: flex;justify-content: space-between;padding: 5px 10px;margin-bottom: 5px;background-color: f5f5f5; }.cart-total {padding: 10px;background-color: 333;color: fff;text-align: right; }.cart-total p {margin-bottom: 5px; }.checkout-btn {background-color: 000;color: fff;padding: 5px 10px;border: none;border-radius: 5px;cursor: pointer; }javaScript脚本： javascript const products = [{id: 1,name: "产品1",price: 100},{id: 2,name: "产品2",price: 200},{id: 3,name: "产品3",price: 300} ];let cartItems = [];const cartItemsElement = document.querySelector(".cart-items"); const totalPriceElement = document.getElementById("total-price");const addToCartButtons = document.querySelectorAll(".add-to-cart-btn"); addToCartButtons.forEach(btn => {btn.addEventListener("click", e => {const productId = e.target.dataset.id;const product = products.find(p => p.id == productId);cartItems.push(product);updateCart();}); });const updateCart = () => {cartItemsElement.innerHTML = "";cartItems.forEach(item => {const li = document.createElement("li");li.textContent = `${item.name} x 1 - ${item.price}元`;cartItemsElement.appendChild(li);});let totalPrice = cartItems.reduce((acc, curr) => acc + curr.price, 0);totalPriceElement.textContent = `${totalPrice}元`; };
相关标签： 购物车代码vue、 购物车代码html、

本文地址：https://www.qianwe.cn/article/081aa41591cccaef3503.html

上一篇：购物车代码jsp购物车代码js...
下一篇：购物车代码java购物车代码jquery...