用html和js和jquery写一个购物车

在HTML、JavaScript和jQuery中创建一个简单的购物车功能，我们可以分步骤来做：

1. HTML结构：

<div id="cart">
  <h2>购物车</h2>
  <ul class="items"></ul>
  <button id="add-to-cart">添加到购物车</button>
  <div id="total-cost">总价: $0.00</div>
</div>

2. CSS (为了简洁，只包含基础样式):

#cart {
  border: 1px solid #ccc;
  padding: 15px;
}

.items li {
  margin-bottom: 10px;
}

3. JavaScript/jQuery代码：

$(document).ready(function() {
  // 添加商品到购物车函数
  function addToCart(itemName, itemPrice) {
    var cart = $('.items');
    
    // 创建新的列表项
    var listItem = $('<li><span>' + itemName + '</span> - $' + itemPrice + '</li>');
    
    // 计算总价格
    var totalCost = parseFloat($('#total-cost').text().replace('$', ''));
    totalCost += itemPrice;

    // 更新总价
    $('#total-cost').text('$' + totalCost.toFixed(2));

    // 将新项添加到购物车
    cart.append(listItem);
  }

  // 鼠标点击事件模拟添加按钮效果
  $('#add-to-cart').click(function() {
    addToCart('示例商品', '10.99'); // 使用实际的商品名和价格替换这里
  });
});

这个例子演示了如何创建一个基本的购物车界面，用户点击“添加到购物车”按钮会向购物车中添加一项商品，并实时更新总价。当然，这只是一个基础示例，实际应用中还需要考虑更多细节，如库存管理、删除商品等。