购物车案例

最新推荐文章于 2024-10-11 00:01:50 发布
qq_30437579
最新推荐文章于 2024-10-11 00:01:50 发布
阅读量41
点赞数
文章标签： html javascript 前端
本文链接：https://blog.csdn.net/qq_30437579/article/details/132562043
版权
本文详细描述了一个包含商品选择、数量调整、总价计算等功能的购物车组件，使用了HTML、CSS和JavaScript实现，展示了如何在前端进行商品管理操作。
摘要由CSDN通过智能技术生成
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>购物车</title>
  <style>
    .cart {
      width: 700px;
      padding: 0 10px 10px;
      border: 1px solid #D5E5F5;
    }

    .cart-title {
      margin-bottom: 10px;
      font-size: 14px;
      border-bottom: 1px solid #AED2FF;
      line-height: 30px;
      height: 30px;
      font-weight: 700;
      text-indent: 15px;
      color: #333;
      font-family: 'Microsoft YaHei';
    }

    .cart-table {
      width: 100%;
      margin: 0 auto;
      border-collapse: collapse;
      font-size: 12px;
      font-family: Verdana, "Microsoft YaHei";
      color: #333;
    }

    .cart-table th {
      border-bottom: 2px solid #B2D1FF;
      font-weight: normal;
      height: 35px;
      line-height: 23px;
    }

    .cart-item {
      background-color: #FAFCFF;
      border-bottom: 1px dotted #84B3FD;
    }

    .cart-item td {
      height: 55px;
      text-align: center;
    }

    .cart-item .cart-txt-left {
      text-align: left;
    }

    .cart-name {
      color: #3366D4;
      font-weight: bold;
    }

    .cart-subtotal {
      color: #FF3334;
      font-weight: bold;
    }

    .cart-reduce,
    .cart-add {
      display: inline-block;
      width: 16px;
      height: 16px;
      line-height: 16px;
      color: #FFF;
      background-color: #BDBDBD;
      border: 0;
      cursor: pointer;
      border-radius: 2px;
      font-family: 'Arial';
      font-size: 13.3333px;
    }

    .cart-reduce:hover,
    .cart-add:hover {
      background-color: #FF9900;
    }

    .cart-num {
      margin: 5px;
      width: 35px;
      text-align: center;
      height: 20px;
      line-height: 20px;
      padding: 0 3px;
      display: inline-block;
      background: #fff;
      border: 1px solid #bbb
    }

    .cart-del,
    .cart-all {
      color: #3366D4;
    }

    .cart-del:hover,
    .cart-all:hover {
      text-decoration: underline;
      cursor: pointer
    }

    .cart-bottom {
      height: 55px;
      text-align: right
    }

    .cart-bottom .cart-all {
      position: relative;
      top: 1px
    }

    .cart-total-price {
      color: #FF3334;
      font-weight: bold;
      font-size: 16px;
    }

    .cart-bottom-btn {
      color: #FFF;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      margin: 0 20px;
      background: #FE8502;
      border: 1px solid #FF6633;
      border-radius: 5px 5px 5px 5px;
      padding: 6px 12px;
    }

    .cart-bottom-btn:hover {
      background: #FF6600;
    }
  </style>
</head>

<body>
  <div class="cart">
    <div class="cart-title">我的购物车</div>
    <table class="cart-table">
      <tr>
        <th width="60"><label><input class="all-check" type="checkbox" />&nbsp;全选</label></th>
        <th>商品</th>
        <th width="120">单价</th>
        <th width="100">数量</th>
        <th width="120">小计</th>
        <th width="80">操作</th>
      </tr>
      <tr class="cart-item">
        <td><input class="cart-check" type="checkbox" checked></td>
        <td><span class="cart-name">Loading...</span></td>
        <td><span class="cart-price">0</span></td>
        <td><span class="cart-reduce">-</span><span class="cart-num">0</span><span class="cart-add">+</span></td>
        <td><span class="cart-subtotal">0</span></td>
        <td><span class="cart-del">删除</span></td>
      </tr>


      <tr class="cart-bottom">
        <td colspan="6">
          <span class="cart-bottom-span">已选择 <span class="cart-total-num">0</span> 件商品</span>
          <span class="cart-bottom-span">总计：<span class="cart-total-price">0</span></span>
          <span class="cart-bottom-btn">提交订单</span>
        </td>
      </tr>
    </table>
  </div>

  <script>
    const cartList = [
      { name: 'JavaScript实战', price: 45.8, num: 1, checked: true },
      { name: 'PHP基础案例教程', price: 49.8, num: 2, checked: false },
      { name: 'HTML+CSS网页制作', price: 45.2, num: 5, checked: true },
      { name: 'Java基础入门', price: 45, num: 8, checked: true },
    ]

    const cartTable = document.querySelector('.cart-table')
    const allCheck = document.querySelector('.all-check')
    showList()
    function showList () {
      const bottom = document.querySelector('.cart-bottom')
      const totalNum = document.querySelector('.cart-total-num')
      const totalPrice = document.querySelector('.cart-total-price')
      const items = document.querySelectorAll('.cart-item')



      items.forEach(item => item.remove())

      const totalNumValue = cartList.filter(item => item.checked)
        .reduce((pre, cur) => {

          return pre + cur.num

        }, 0)
      const totalPriceValue = cartList.filter(item => item.checked).reduce((pre, cur) => {
        return pre + cur.price * cur.num
      }, 0)

      totalNum.innerHTML = totalNumValue
      totalPrice.innerHTML = totalPriceValue

      let html = ''
      cartList.forEach(item => {
        const { name, price, num, checked } = item
        let total = (price * num).toFixed(2)
        html += `
        <tr class="cart-item">
        <td><input class="cart-check" type="checkbox" ${checked ? 'checked' : ''}></td>
        <td><span class="cart-name">${name}</span></td>
        <td><span class="cart-price">${price}</span></td>
        <td><span class="cart-reduce">-</span><span class="cart-num">${num}</span><span class="cart-add">+</span></td>
        <td><span class="cart-subtotal">${total}</span ></td >
      <td><span class="cart-del">删除</span></td>
      </tr >`
      })
      bottom.insertAdjacentHTML('beforebegin', html)

    }

    cartTable.addEventListener('click', function (e) {
      // console.log(e.target.className)
      const className = e.target.className
      let num
      let rowIndex
      switch (className) {
        case 'cart-check':
          rowIndex = e.target.closest('.cart-item').rowIndex - 1
          cartList.forEach((item, index) => {
            if (index === rowIndex) {
              item.checked = e.target.checked
            }
          })
          if (cartList.filter(item => item.checked).length == cartList.length) {
            allCheck.checked = true
          } else {
            allCheck.checked = false
          }

          break
        case 'all-check':
          cartList.forEach((item, index) => {
            item.checked = e.target.checked
          })

          break

        case 'cart-add':
          num = e.target.previousElementSibling
          num.innerHTML = ++num.innerHTML
          rowIndex = e.target.closest('.cart-item').rowIndex - 1
          cartList.forEach((item, index) => {
            if (index === rowIndex) {
              item.num = +num.innerHTML
            }
          })
          break

        case 'cart-del':
          rowIndex = e.target.closest('.cart-item').rowIndex - 1
          cartList.splice(rowIndex, 1)
          break

        case 'cart-reduce':
          num = e.target.nextElementSibling
          num.innerHTML = --num.innerHTML
          rowIndex = e.target.closest('.cart-item').rowIndex - 1
          if (+num.innerHTML === 0) {
            cartList.splice(rowIndex, 1)
          } else {
            cartList.forEach((item, index) => {
              if (index === rowIndex) {
                item.num = +num.innerHTML
              }
            })
          }

          break


      }
      showList()

    })





  </script>
</body>

</html>