制作京东购物车，包含html+js+css完整代码

这篇文章距离上次修改已过206天，其中的内容可能已经有所变动。

由于篇幅所限，这里提供一个简化版的购物车示例，包含HTML、JavaScript和CSS代码。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JD Cart</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="cart">
  <h2>Your Cart</h2>
  <div class="item">
    <button class="remove-item">&times;</button>
    <img src="item-image.jpg" alt="Item">
    <h3>Item Name</h3>
    <p class="price">$99.99</p>
    <input class="quantity" type="number" value="1">
    <p class="subtotal">$99.99</p>
  </div>
  <!-- More items can be added here -->
  <button id="checkout">Checkout ($0)</button>
</div>
 
<script src="script.js"></script>
</body>
</html>

CSS (style.css):




#cart {
  width: 300px;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}
 
.item {
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
 
.item img {
  width: 50px;
  height: 50px;
  float: left;
}
 
.item .remove-item {
  float: right;
  cursor: pointer;
}
 
.price, .subtotal {
  font-weight: bold;
  margin-left: 60px;
}
 
.quantity {
  width: 40px;
  margin-left: 60px;
}
 
#checkout {
  float: right;
  background-color: #000;
  color: #fff;
  border: none;
  padding: 10px;
  margin-top: 10px;
  cursor: pointer;
}

JavaScript (script.js):




document.addEventListener('DOMContentLoaded', function() {
  let checkoutButton = document.getElementById('checkout');
  let items = document.getElementsByClassName('item');
  let subtotals = document.getElementsByClassName('subtotal');
  let quantities = document.getElementsByClassName('quantity');
  let total = 0;
 
  // Update subtotal for each item
  function updateSubtotal(itemIndex) {
    let price = parseFloat(items[itemIndex].querySelector('.price').innerText.replace('$', ''));
    let quantity = parseInt(quantities[itemIndex].value, 10);
    subtotals[itemIndex].innerText = '$' + (price * quantity).toFixed(2);
  }
 
  // Calculate total and update checkout button
  function calculateTotal() {
    total = 0;
    for (let i = 0; i < items.length; i++) {
      total += parseFloat(subtotals[i].innerText.replace('$', ''));
    }
    checkoutButton.innerText = 'Checkout ($' + total.toFixed(2) + ')';
  }
 
  // Event listeners
  for (let i = 0; i < items.length; i++) {
    quantities[i].addEventListener('change', funct

制作京东购物车，包含html+js+css完整代码

评论已关闭

推荐阅读