购物车案例

最新推荐文章于 2024-08-25 22:44:31 发布
zhazhali_fenqi
最新推荐文章于 2024-08-25 22:44:31 发布
阅读量149
点赞数
分类专栏：前端学习文章标签： css javascript css3
本文链接：https://blog.csdn.net/zhazhali_fenqi/article/details/122457192
版权
前端学习专栏收录该内容
26 篇文章 0 订阅
订阅专栏
运行截图：
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>购物车全选功能</title>
  <!-- 引入初始化 -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #666;
    }

    body {
      background: #fff;
      color: #666;
      font-size: 14px;
    }

    input {
      outline: none;
    }

    .clearfix::before,
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }
  </style>
  <!-- 引入购物车样式 -->
  <style>
    table {
      width: 800px;
      margin: 0 auto;
      border-collapse: collapse;
    }

    th {
      font: normal 14px/50px '宋体';
      color: #666;
    }

    th,
    td {
      border: none;
      text-align: center;
      border-bottom: 1px dashed #ccc;
    }

    input[type='checkbox'] {
      width: 13px;
      height: 13px;
    }

    tbody p {
      position: relative;
      bottom: 10px;
    }

    tbody .add,
    tbody .reduce {
      float: left;
      width: 22px;
      height: 22px;
      border: 1px solid #ccc;
      text-align: center;
      background: none;
      outline: none;
      cursor: pointer;
    }

    tbody input[type='text'] {
      width: 50px;
      float: left;
      height: 18px;
      text-align: center;
    }

    tbody .count-c {
      width: 98px;
      margin: 0 auto;
    }

    button[disabled] {
      color: #ddd;
      cursor: not-allowed;
    }

    tbody tr:hover {
      background: #eee;
    }

    tbody tr.active {
      background: rgba(241, 209, 149, 0.945);
    }

    .controls {
      width: 790px;
      margin: 10px auto;
      border: 1px solid #ccc;
      line-height: 50px;
      padding-left: 10px;
      position: relative;
    }

    .controls .del-all,
    .controls .clear {
      float: left;
      margin-right: 50px;
    }

    .controls p {
      float: right;
      margin-right: 100px;
    }

    .controls span {
      color: red;
    }

    .controls .pay {
      position: absolute;
      right: 0;
      width: 80px;
      height: 54px;
      background: red;
      font: bold 20px/54px '宋体';
      color: #fff;
      text-align: center;
      bottom: -1px;
    }

    .controls .total-price {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="car">
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" id="all" />全选</th>
          <th>商品</th>
          <th>单价</th>
          <th>商品数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="carBody">
        <tr>
          <td>
            <input class="s_ck" type="checkbox" readonly />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">5￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">5￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">10￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">20￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">20￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">40￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">35￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">70￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="controls clearfix">
      <a href="javascript:" class="del-all">删除所选商品</a>
      <a href="javascript:" class="clear">清理购物车</a>
      <a href="javascript:" class="pay">去结算</a>
      <p>
        已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0￥</span>
      </p>
    </div>
  </div>
  <script>
    let adds = document.querySelectorAll('.add')
    let reduces = document.querySelectorAll('.reduce')
    let dels = document.querySelectorAll('.del')
    let inputs = document.querySelectorAll('.count-c input')
    let prices = document.querySelectorAll('.price')
    let totals = document.querySelectorAll('.total')
    let totalResult = document.querySelector('.total-price')
    let totalCount = document.querySelector('#totalCount')
    let carBody = document.querySelector('#carBody')
    for (let i = 0; i < adds.length; i++) {
      totals[i].innerText = prices[i].innerText
      adds[i].addEventListener('click', function () {
        inputs[i].value++
        reduces[i].disabled = false// 减号要启用
        // prices[i].innerText  得到的是 5¥     parseInt('5¥')  === 5
        console.log(parseInt(prices[i].innerText))
        totals[i].innerText = parseInt(prices[i].innerText) * inputs[i].value + '¥'
        result()
      })

      //2. 减号的操作
      reduces[i].addEventListener('click', function () {
        inputs[i].value--
        // 判断如果表单里面的值 小于等于1 则，禁用按钮
        if (inputs[i].value <= 1) {
          this.disabled = true
        }
        totals[i].innerText = parseInt(prices[i].innerText) * inputs[i].value + '¥'
        result()
      })


      // 3. 删除操作

      dels[i].addEventListener('click', function () {
        // 父元素.removeChild(子元素)  
        //点击的事a,a的父亲事td，td的父亲事tr，tr的父亲是body
        //所以按照这句的语法规定,我们要删除的是这一整条数据tr，它的父亲是body
        carBody.removeChild(this.parentNode.parentNode)
        result()
      })
    }
     
    function result() {
      let totals = document.querySelectorAll('.total')
      let inputs = document.querySelectorAll('.count-c input')
      let sum = 0
      let num = 0
      for (let i = 0; i < totals.length; i++) {
        sum = sum + parseInt(totals[i].innerText)
        num = num + parseInt(inputs[i].value)
      }
      totalResult.innerText = sum + '￥'
      totalCount.innerText = num
    }

    let all = document.querySelector('#all')
    let cks = document.querySelectorAll('.s_ck')

    all.addEventListener('click', function () {
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = all.checked
      }
      result()
    })

    for (let i = 0; i < cks.length; i++) {
      cks[i].addEventListener('click', function () {
        let totals = document.querySelectorAll('.total')
        let inputs = document.querySelectorAll('.count-c input')
        let sum = 0
        let num = 0
        let flag = 1
        for (let j = 0; j < cks.length; j++) {
          if (cks[j].checked === false) {
            all.checked = false
            flag=0
          }else{
            sum = sum + parseInt(totals[j].innerText)
            num = num + parseInt(inputs[j].value)
            console.log(sum);
          }
        }
        if(flag===1){
          all.checked = true
        }
        totalResult.innerText = sum + '￥'
        totalCount.innerText = num
      })
    }

    let nodes=document.querySelectorAll('tr');
    let delall = document.querySelector('.del-all')
    console.log(delall)
    delall.addEventListener('click',function(){
      for (let i = 0; i < nodes.length; i++) {
      if(cks[i].checked === true){
        carBody.removeChild(nodes[i])
      }
    }
    result()
    })
  </script>

</body>

</html>
zhazhali_fenqi
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车案例

运行截图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title&
复制链接

扫一扫
专栏目录