js实现购物车

最新推荐文章于 2024-06-18 17:19:20 发布

无妄的罪

最新推荐文章于 2024-06-18 17:19:20 发布

阅读量3.8k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/m0_73481765/article/details/131472408

版权

好的，我们来创建一个简单的购物车。首先，我们需要一个空的HTML页面。在这里，我们将包含一个商品列表和一个购物车列表。

<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
  </head>
  <body>
    <h1>商品列表</h1>
    <div id="product-list"></div>

    <h1>购物车</h1>
    <div id="cart"></div>

    <script>
      // 我们将代码添加到这里
    </script>
  </body>
</html>

接下来，我们需要一个数组来存储商品的信息。这个数组可以用一个JavaScript对象的数组来表示，每个对象都有商品的名称、价格和图片URL属性。

var products = [
  {
    name: 'T恤',
    price: 19.99,
    image: 'https://via.placeholder.com/150'
  },
  {
    name: '裤子',
    price: 39.99,
    image: 'https://via.placeholder.com/150'
  },
  {
    name: '鞋子',
    price: 59.99,
    image: 'https://via.placeholder.com/150'
  }
];

接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。

var productContainer = document.getElementById('product-list');

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

  var html = `
    <div>
      <img src="${product.image}">
      <h3>${product.name}</h3>
      <p>${product.price}</p>
      <button onclick="addToCart(${i})">加入购物车</button>
    </div>
  `;

  productContainer.insertAdjacentHTML('beforeend', html);
}

我们使用了模板字面量（template literals）来创建包含商品信息的HTML代码。我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。这个函数将负责将商品添加到购物车中。

现在，我们需要一个数组来存储购物车中的物品。这个数组可以使用一个对象的数组来表示，每个对象都有商品的名称、价格和数量属性。

var cartItems = [];

接下来，我们需要编写addToCart函数。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。

function addToCart(index) {
  var product = products[index];

  var existingItemIndex = cartItems.findIndex(function (item) {
    return item.name === product.name;
  });

  if (existingItemIndex >= 0) {
    cartItems[existingItemIndex].quantity++;
  } else {
    cartItems.push({
      name: product.name,
      price: product.price,
      quantity: 1
    });
  }

  updateCart();
}

在这个函数中，我们首先从商品数组中取出被点击的商品。然后，我们搜索购物车数组，看看商品是否已经被添加到购物车中。如果是，我们增加购物车数组中相应物品的数量。如果不是，我们将新商品添加到购物车数组中。

现在，我们需要一个函数来更新购物车的HTML内容。

function updateCart() {
  var cartContainer = document.getElementById('cart');
  cartContainer.innerHTML = '';

  for (var i = 0; i < cartItems.length; i++) {
    var item = cartItems[i];

    var html = `
      <div>
        <h3>${item.name}</h3>
        <p>单价： ${item.price}</p>
        <p>数量： ${item.quantity}</p>
      </div>
    `;

    cartContainer.insertAdjacentHTML('beforeend', html);
  }
}

这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。

最后，我们需要将所有代码放在一起。

<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
  </head>
  <body>
    <h1>商品列表</h1>
    <div id="product-list"></div>

    <h1>购物车</h1>
    <div id="cart"></div>

    <script>
      var products = [
        {
          name: 'T恤',
          price: 19.99,
          image: 'https://via.placeholder.com/150'
        },
        {
          name: '裤子',
          price: 39.99,
          image: 'https://via.placeholder.com/150'
        },
        {
          name: '鞋子',
          price: 59.99,
          image: 'https://via.placeholder.com/150'
        }
      ];

      var cartItems = [];

      var productContainer = document.getElementById('product-list');

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

        var html = `
          <div>
            <img src="${product.image}">
            <h3>${product.name}</h3>
            <p>${product.price}</p>
            <button onclick="addToCart(${i})">加入购物车</button>
          </div>
        `;

        productContainer.insertAdjacentHTML('beforeend', html);
      }

      function addToCart(index) {
        var product = products[index];

        var existingItemIndex = cartItems.findIndex(function (item) {
          return item.name === product.name;
        });

        if (existingItemIndex >= 0) {
          cartItems[existingItemIndex].quantity++;
        } else {
          cartItems.push({
            name: product.name,
            price: product.price,
            quantity: 1
          });
        }

        updateCart();
      }

      function updateCart() {
        var cartContainer = document.getElementById('cart');
        cartContainer.innerHTML = '';

        for (var i = 0; i < cartItems.length; i++) {
          var item = cartItems[i];

          var html = `
            <div>
              <h3>${item.name}</h3>
              <p>单价： ${item.price}</p>
              <p>数量： ${item.quantity}</p>
            </div>
          `;

          cartContainer.insertAdjacentHTML('beforeend', html);
        }
      }
    </script>
  </body>
</html>

现在，我们完成了一个简单的购物车。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。

无妄的罪

关注

2
点赞
踩
41

收藏

觉得还不错? 一键收藏
0
评论
js实现购物车

我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。
复制链接

扫一扫