手把手教你用JavaScript打造购物帝国，尽享购物乐趣

前端

2023-11-13 23:12:07

JavaScript购物车：网购神器，轻松搞定！

购物车，购物必备利器

随着网络购物的蓬勃发展，购物车已经成为我们日常购物不可或缺的工具。它不仅能帮助我们轻松管理购物清单，还能实时计算商品总价，带来更加便捷高效的购物体验。而JavaScript购物车，无疑是购物一族的最佳选择！

JavaScript购物车的强大功能

JavaScript购物车功能齐全，让你的购物之旅更加得心应手：

全选功能： 一键选中所有商品，省时省力。
清空购物车： 一键清除所有商品，重新开始购物之旅。
删除单条商品： 轻松剔除不想要的商品，调整你的购物清单。
数据渲染： 实时更新购物车内容，让你随时掌握购物动态。
总价格计算： 自动计算总花费，省去繁琐的计算步骤。
删除选中物品： 快速删除不必要的商品，优化你的购物体验。
添加和减少商品数量： 灵活调整购物车内容，满足你的不同需求。

存储功能，数据永不丢失

操作数据后在浏览器本地永久存储，即使关闭页面，数据依然保留，下次访问依然可用。如此一来，你再也不用担心数据丢失，尽情享受购物的乐趣。

JavaScript购物车，你的不二之选

JavaScript购物车，功能齐全，操作简单，数据安全，是购物达人的不二之选。赶快行动起来，打造你的专属JavaScript购物车，开启畅快购物之旅吧！

教程：打造你的JavaScript购物车

代码示例：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>购物车</h1>
  <ul id="cart"></ul>
  <button id="全选">全选</button>
  <button id="清空购物车">清空购物车</button>
  <button id="删除选中物品">删除选中物品</button>
  <button id="添加商品">添加商品</button>
  <button id="减少商品数量">减少商品数量</button>
  <div id="总价格"></div>
  <script src="购物车.js"></script>
</body>
</html>

// 定义购物车数据
var cart = [];

// 定义商品数据
var products = [
  {
    id: 1,
    name: "苹果",
    price: 5.00
  },
  {
    id: 2,
    name: "香蕉",
    price: 3.00
  },
  {
    id: 3,
    name: "橙子",
    price: 4.00
  }
];

// 全选功能
function 全选() {
  for (var i = 0; i < cart.length; i++) {
    cart[i].selected = true;
  }

  renderCart();
}

// 清空购物车功能
function 清空购物车() {
  cart = [];

  renderCart();
}

// 删除选中物品功能
function 删除选中物品() {
  for (var i = 0; i < cart.length; i++) {
    if (cart[i].selected) {
      cart.splice(i, 1);
      i--;
    }
  }

  renderCart();
}

// 添加商品功能
function 添加商品() {
  var productId = prompt("请输入商品ID：");
  var quantity = prompt("请输入商品数量：");

  for (var i = 0; i < products.length; i++) {
    if (products[i].id == productId) {
      var product = products[i];

      for (var j = 0; j < quantity; j++) {
        cart.push({
          id: product.id,
          name: product.name,
          price: product.price,
          selected: false
        });
      }

      break;
    }
  }

  renderCart();
}

// 减少商品数量功能
function 减少商品数量() {
  var productId = prompt("请输入商品ID：");
  var quantity = prompt("请输入商品数量：");

  for (var i = 0; i < cart.length; i++) {
    if (cart[i].id == productId) {
      if (cart[i].quantity >= quantity) {
        cart[i].quantity -= quantity;
      } else {
        cart[i].quantity = 0;
      }

      break;
    }
  }

  renderCart();
}

// 计算总价格
function 总价格() {
  var total = 0;

  for (var i = 0; i < cart.length; i++) {
    total += cart[i].price * cart[i].quantity;
  }

  return total;
}

// 渲染购物车
function renderCart() {
  var cartHtml = "";

  for (var i = 0; i < cart.length; i++) {
    cartHtml += "<li>";
    cartHtml += "<input type='checkbox' name='selected' value='" + cart[i].id + "' " + (cart[i].selected ? "checked" : "") + ">";
    cartHtml += cart[i].name + " x " + cart[i].quantity + " = ¥" + (cart[i].price * cart[i].quantity);
    cartHtml += "</li>";
  }

  document.getElementById("cart").innerHTML = cartHtml;

  document.getElementById("总价格").innerHTML = "总价格：¥" + 总价格();
}

// 事件监听
document.getElementById("全选").addEventListener("click", 全选);
document.getElementById("清空购物车").addEventListener("click", 清空购物车);
document.getElementById("删除选中物品").addEventListener("click", 删除选中物品);
document.getElementById("添加商品").addEventListener("click", 添加商品);
document.getElementById("减少商品数量").addEventListener("click", 减少商品数量);

// 初始化购物车
renderCart();