js 實(shí)現(xiàn)完整版淘寶購物車

js
小億
183
2023-12-19 08:33:57
欄目: 編程語言

以下是一個(gè)簡單的實(shí)現(xiàn)淘寶購物車的示例代碼：

HTML:

<div id="cart">
  <h2>購物車</h2>
  <ul id="cart-items"></ul>
  <button id="checkout-btn">結(jié)算</button>
</div>

<div id="product-list">
  <h2>商品列表</h2>
  <ul>
    <li>
      <span>商品1</span>
      <button class="add-to-cart">加入購物車</button>
    </li>
    <li>
      <span>商品2</span>
      <button class="add-to-cart">加入購物車</button>
    </li>
    <li>
      <span>商品3</span>
      <button class="add-to-cart">加入購物車</button>
    </li>
  </ul>
</div>

JavaScript:

// 獲取購物車和商品列表
const cart = document.getElementById('cart-items');
const productList = document.getElementById('product-list');

// 定義購物車數(shù)據(jù)
let cartItems = [];

// 加入購物車事件處理函數(shù)
function addToCart(event) {
  const product = event.target.previousElementSibling.textContent;
  const item = { name: product };
  cartItems.push(item);
  renderCart();
}

// 結(jié)算事件處理函數(shù)
function checkout() {
  // 清空購物車
  cartItems = [];
  renderCart();
  alert('結(jié)算成功！');
}

// 渲染購物車
function renderCart() {
  cart.innerHTML = '';
  cartItems.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.name;
    cart.appendChild(li);
  });
}

// 添加加入購物車按鈕點(diǎn)擊事件監(jiān)聽器
const addToCartButtons = document.querySelectorAll('.add-to-cart');
addToCartButtons.forEach(btn => {
  btn.addEventListener('click', addToCart);
});

// 添加結(jié)算按鈕點(diǎn)擊事件監(jiān)聽器
const checkoutBtn = document.getElementById('checkout-btn');
checkoutBtn.addEventListener('click', checkout);

此示例中，通過JavaScript實(shí)現(xiàn)了以下功能：

  1. 點(diǎn)擊“加入購物車”按鈕將商品添加到購物車中。
  2. 點(diǎn)擊“結(jié)算”按鈕清空購物車，并彈出結(jié)算成功的提示。
  3. 使用 renderCart 函數(shù)將購物車數(shù)據(jù)渲染到頁面中。

請(qǐng)注意，此示例只是一個(gè)簡單的實(shí)現(xiàn)，還有很多細(xì)節(jié)和功能可以進(jìn)行優(yōu)化和擴(kuò)展。

0 踩