当前位置：首页 > 行业动态 > 正文

html5网页购物车

admin
行业动态
2025-05-06
2

HTML5网页购物车基于本地存储，支持商品增删改查

网页购物车结构设计

模块	功能描述	技术实现
商品列表	展示可购买商品信息	`<ul>`+`<li>`结构，含商品图片、名称、价格、按钮
购物车区域	显示已选商品及总价	`<table>`布局，动态生成商品项
操作按钮	添加/删除/修改商品	绑定点击事件的`<button>`元素

核心功能实现（代码示例）

<!-商品列表示例 -->
<div class="product-list">
  <ul>
    <li>
      <img src="product1.jpg" alt="商品1">
      <h4>商品名称1</h4>
      <p>￥100.00</p>
      <button class="add-cart">加入购物车</button>
    </li>
    <!-更多商品... -->
  </ul>
</div>
<!-购物车表格结构 -->
<div class="shopping-cart">
  <table>
    <thead>
      <tr>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="cart-items">
      <!-动态生成商品行 -->
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">总计</td>
        <td id="total-price">￥0.00</td>
      </tr>
    </tfoot>
  </table>
</div>

交互逻辑与JS实现

// 购物车数据结构
let cart = JSON.parse(localStorage.getItem('cart')) || [];
// 添加商品到购物车
document.querySelectorAll('.add-cart').forEach(btn => {
  btn.addEventListener('click', function() {
    const product = {
      id: this.dataset.id, // 通过data属性获取商品ID
      name: this.parentNode.querySelector('h4').innerText,
      price: parseFloat(this.parentNode.querySelector('p').innerText.replace('￥','')),
      count: 1
    };
    addToCart(product);
  });
});
// 添加/更新购物车函数
function addToCart(product) {
  let existing = cart.find(item => item.id === product.id);
  if (existing) {
    existing.count += 1;
  } else {
    cart.push(product);
  }
  saveCart();
  renderCart();
}
// 保存到本地存储
function saveCart() {
  localStorage.setItem('cart', JSON.stringify(cart));
}
// 渲染购物车
function renderCart() {
  const cartItems = document.getElementById('cart-items');
  cartItems.innerHTML = ''; // 清空现有内容
  cart.forEach((item, index) => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${item.name}</td>
      <td>￥${item.price.toFixed(2)}</td>
      <td>
        <button class="decrease">-</button>
        ${item.count}
        <button class="increase">+</button>
      </td>
      <td>￥${(item.price  item.count).toFixed(2)}</td>
      <td><button class="remove" data-index="${index}">删除</button></td>
    `;
    cartItems.appendChild(row);
  });
  // 更新总价
  document.getElementById('total-price').innerText = '￥' + cart.reduce((sum, item) => sum + item.price  item.count, 0).toFixed(2);
}

样式优化建议

样式属性	效果描述	推荐方案
布局方式	自适应不同屏幕尺寸	使用Flexbox或Grid布局
状态反馈	按钮点击效果	`:hover`伪类+过渡动画
视觉焦点	突出选中状态	高亮当前行+边框阴影

数据持久化处理

// 初始化时加载购物车数据
window.onload = function() {
  renderCart();
  // 绑定数量调节按钮
  document.getElementById('cart-items').addEventListener('click', function(e) {
    const target = e.target;
    const index = target.dataset.index;
    if (target.classList.contains('increase')) {
      cart[index].count += 1;
    } else if (target.classList.contains('decrease')) {
      cart[index].count = Math.max(1, cart[index].count 1);
    } else if (target.classList.contains('remove')) {
      cart.splice(index, 1);
    }
    saveCart();
    renderCart();
  });
};