当前位置：首页 > article >正文

js实现数据版购物车（实现购物车所有功能）

article 2024/10/28 3:54:32

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 0 auto;
        width: 700px;
      }
      .goodsimg {
        width: 80px;
        height: 80px;
      }
      .goodsnum {
        width: 50px;
        text-align: center;
      }
      .foot {
        width: 700px;
        margin: 0 auto;
        position: relative;
      
        &>span , button{
            position: absolute;
           
        }
        .del {
            left: 0;
            top: 10px;
        }
        .delcart {
            left: 150px;
            top: 10px;
        }
        .setnum {
            right: 150px;
            top: 10px;
        }
        .goby {
            right: 0;
            background-color: red;
            padding: 10px 20px;
            border: 0;
            color: white;
        }
      }
    </style>
  </head>
  <body>
    <table class="box">
      <thead>
        <tr>
          <th><input class="allchecked" onclick="setallselect(this)" type="checkbox" name="" id="" />全选</th>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th><input class="checked" type="checkbox" name="" id="" /></th>
          <th>
            <img
              class="goodsimg"
              src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
              alt=""
            /><br />牛奶
          </th>
          <th>￥<span>15</span></th>
          <th>
            <button class="min">-</button
            ><input class="goodsnum" value="1" type="text" />
            <button class="max">+</button>
          </th>
          <th>￥<span class="all">0</span></th>
          <th onclick="deldom(this)">删除</th>
        </tr>
        <tr>
          <th><input  class="checked" type="checkbox" name="" id="" /></th>
          <th>
            <img
              class="goodsimg"
              src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
              alt=""
            /><br />牛奶
          </th>
          <th>￥<span>25</span></th>
          <th>
            <button class="min">-</button
            ><input class="goodsnum" value="1" type="text" />
            <button class="max">+</button>
          </th>
          <th>￥<span class="all">0</span></th>
          <th onclick="deldom(this)">删除</th>
        </tr>
        <tr>
          <th><input  class="checked" type="checkbox" name="" id="" /></th>
          <th>
            <img
              class="goodsimg"
              src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
              alt=""
            /><br />牛奶
          </th>
          <th>￥<span>35</span></th>
          <th>
            <button class="min">-</button
            ><input class="goodsnum" value="1" type="text" />
            <button class="max">+</button>
          </th>
          <th>￥<span class="all">0</span></th>
          <th onclick="deldom(this)">删除</th>
        </tr>
        <tr>
          <th><input  class="checked" type="checkbox" name="" id="" /></th>
          <th>
            <img
              class="goodsimg"
              src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
              alt=""
            /><br />牛奶
          </th>
          <th>￥<span>45</span></th>
          <th>
            <button class="min">-</button
            ><input class="goodsnum" value="1" type="text" />
            <button class="max">+</button>
          </th>
          <th>￥<span class="all">0</span></th>
          <th onclick="deldom(this)">删除</th>
        </tr>
        <tr>
          <th><input  class="checked" type="checkbox" name="" id="" /></th>
          <th>
            <img
              class="goodsimg"
              src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
              alt=""
            /><br />牛奶
          </th>
          <th>￥<span>55</span></th>
          <th>
            <button class="min">-</button
            ><input class="goodsnum" value="1" type="text" />
            <button class="max">+</button>
          </th>
          <th>￥<span class="all">0</span></th>
          <th onclick="deldom(this)">删除</th>
        </tr>
      </tbody>
    </table>
    <div class="foot">
      <span class="del" onclick="delopengoods()">删除所选商品</span>
      <span class="delcart" onclick="clearcart()">清理购物车</span>
      <span class="setnum">选择<span class="nums" style="color: red;">4</span>件商品总价<span class="price" style="color: red;">￥70</span></span>
      <button class="goby">去结算</button>
    </div>
    <!-- 1.单行删除元素 -->
     <!-- 2.步进器加减操作 -->
      <!-- 3.小计 -->

      <!-- 单条选中 -->
       <!-- 全选中 -->
        <!-- 计算总数和总价 -->
         <!-- 清理购物车  t0-->
          <!-- 删除选中 -->
    <script>
        // 定义删除元素的方法
        function deldom(el){
            el.parentNode.remove()
            setallnum()

        }
        // 步进器加法减法的操作
        // let mins = document.querySelectorAll('.min')
        // let maxs = document.querySelectorAll('.max')
        // for(let item of mins){
        //     item.addEventListener('click',function(){
        //         let input =this.parentNode.children[1]
        //         input.value = input.value<=1?1:input.value*1-1
                
        //     })
        // }
        // for(let item of maxs){
        //     item.addEventListener('click',function(){
        //        let input =this.parentNode.children[1]
        //         input.value = input.value*1+1   
        //     })
        // }
        let buts = document.querySelectorAll('tr th button')
       for(let item of buts){
        item.addEventListener('click',function(){
            // 判断是加还是减
            let types = this.innerHTML=='+'?1:-1
            let input =this.parentNode.children[1]
            input.value = input.value*1+types
            input.value<=0?input.value = 1:''
            // 设置小计
            setsizeallprice()
               // 调用选中个数的方法
    setallnum()
        })
       }
    //    设置小计
  function setsizeallprice(params) {
    let sizeall = document.querySelectorAll('.all')
    sizeall.forEach(function(item){
        let price = item.parentNode.parentNode.children[2].children[0].innerHTML
        let num = item.parentNode.parentNode.children[3].children[1].value
        
        item.innerHTML = price*num    
    })
    
  }

  setsizeallprice()

// 复选框
let checkeds = document.querySelectorAll('.checked')
//   设置全选
function setallselect(el) {
    checkeds.forEach(function(item){
        item.checked = el.checked
    })   
    // 调用选中个数的方法
    setallnum()
}
// 设置单个选中
checkeds.forEach(function(item){
    item.addEventListener('click',function(){
        let types = true
    checkeds.forEach(function(ied) {
        if (!ied.checked) {
            types = false
        }
    })
        let allchecked = document.querySelector('.allchecked')
        allchecked.checked = types
    // 调用选中个数的方法
    setallnum()
    })
})

// 设置选中的个数和总价
function setallnum(){
    let checkeds = document.querySelectorAll('.checked')
    let nums = document.querySelector('.nums')
    // 总价元素
    let prices = document.querySelector('.price')
    // 获取已经被选中的元素状态
    let num = 0
    let price = 0
    checkeds.forEach(function(item){
        if (item.checked) {
            num+=1
            price+=item.parentNode.parentNode.children[4].children[0].innerHTML*1
         
            
        }
        
    })
    
    console.log(num);
    
    nums.innerHTML = num
    prices.innerHTML = price +"￥"   
}

setallnum()

// 清空购物车
function clearcart(params) {
    let tb = document.querySelector('tbody')
    tb.innerHTML = ''
    setallnum()
}
// 删除选中的商品
function delopengoods() {
    // 所有的选中状态
    let checkeds = document.querySelectorAll('.checked')
    checkeds.forEach(function(item){
        if (item.checked) {
            item.parentNode.parentNode.remove()
        }
    })
    setallnum()
}
        
    </script>
  </body>


</html>

效果图：