最详细js实现购物车功能

最新推荐文章于 2024-05-28 18:30:26 发布

进阶的巨人001

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量1k

点赞数 2

文章标签： js

本文链接：https://blog.csdn.net/weixin_45389051/article/details/104701226

版权

一.html

    <!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>Document</title>
  <link rel="stylesheet" href="./assets/css/reset.css">
  <link rel="stylesheet" href="./assets/css/index.css">
</head>
<body>
  <div class="content">
    <ul class="goods-top clearfix">
      <li>
        <input type="checkbox" id="check-all"> <span>全选</span>
      </li>
    </ul>
    <ul class="goods-list">
      <li class="clearfix">
        <input type="checkbox" class="goods-check">
        <div class="goods-price">
          <p>单价</p>
          <p>100.00</p>
        </div>
        <div class="goods-price">
          <p>积分</p>
          <p>3</p>
        </div>
        <div class="goods-num" goods-price ="100" goods-integral ="3" >
          <button class="less-btn">-</button>
            <input type="number"  class="goods-num-input" value="1">
          <button class="add-btn">+</button>
        </div>
        <div class="goods-total-price" data-total-integral="3">100</div>
        <button class="del-goods">删除</button>
      </li>   
      <li class="clearfix">
        <input type="checkbox" class="goods-check">
        <div class="goods-price">
          <p>单价</p>
          <p>58.00</p>
        </div>
        <div class="goods-price">
          <p>积分</p>
          <p>7</p>
        </div>
        <div class="goods-num" goods-price ="58" goods-integral ="7" >
          <button class="less-btn">-</button>
            <input type="number"  class="goods-num-input" value="1">
          <button class="add-btn">+</button>
        </div>
        <div class="goods-total-price" data-total-integral="7">58</div>
        <button class="del-goods">删除</button>
      </li> 
      <li class="clearfix">
        <input type="checkbox" class="goods-check">
        <div class="goods-price">
          <p>单价</p>
          <p>138.00</p>
        </div>
        <div class="goods-price">
          <p>积分</p>
          <p>10</p>
        </div>
        <div class="goods-num" goods-price ="138" goods-integral ="10" >
          <button class="less-btn">-</button>
            <input type="number"  class="goods-num-input" value="1">
          <button class="add-btn">+</button>
        </div>
        <div class="goods-total-price" data-total-integral="10">138</div>
        <button class="del-goods">删除</button>
      </li> 
      <li class="clearfix">
        <input type="checkbox" class="goods-check">
        <div class="goods-price">
          <p>单价</p>
          <p>123.00</p>
        </div>
        <div class="goods-price">
          <p>积分</p>
          <p>23</p>
        </div>
        <div class="goods-num" goods-price ="123" goods-integral ="23" >
          <button class="less-btn">-</button>
            <input type="number"  class="goods-num-input" value="1">
          <button class="add-btn">+</button>
        </div>
        <div class="goods-total-price" data-total-integral="23">123</div>
        <button class="del-goods">删除</button>
      </li> 
      <li class="clearfix">
        <input type="checkbox" class="goods-check">
        <div class="goods-price">
          <p>单价</p>
          <p>13.00</p>
        </div>
        <div class="goods-price">
          <p>积分</p>
          <p>10</p>
        </div>
        <div class="goods-num" goods-price ="13" goods-integral ="10" >
          <button class="less-btn">-</button>
            <input type="number"  class="goods-num-input" value="1">
          <button class="add-btn">+</button>
        </div>
        <div class="goods-total-price" data-total-integral="10">13</div>
        <button class="del-goods">删除</button>
      </li> 
    </ul>
    <div class="goods-bottom clearfix">
      <button id="del-checked">删除选中</button>
      <div class="goods-bottom-right">
        <p>商品总价：<span id="all-price">0</span></p>
        <p>获取积分：<span id="all-integral">0</span></p>
      </div>
    </div>
  </div>
</body>
</html>
<script src="./assets/js/index.js"></script>

二.index.css

		.goods-list{
		}
		.goods-list li{ 
		  border: 1px solid red;
		  margin:20px 0;
		  padding:10px 15px;
		}
		.goods-list .goods-check{
		  float: left;
		  margin-right: 30px;
		}
		.goods-list .goods-price{
		  float: left;
		  margin-right: 30px; 
		}
		.goods-list .goods-num{
		  float: left;
		  margin-right:20px; 
		}
		.goods-list .goods-num button{
		  width:20px;
		}
		.goods-list .goods-num input{
		  width:20px;
		  text-align: center;
		}
		.goods-list .goods-total-price{
		  float: left;
		  margin-right:20px; 
		  color: orange;
		  font-size: 20px;
		}
		.goods-bottom button{
		  float: left;
		}
		.goods-bottom-right{
		  float: right;
		}

三.index.js

  // 全选功能
var checkAllBtn = document.getElementById("check-all");
var goodsBox = document.getElementsByClassName("goods-list")[0];
//商品的选择按钮
var checkDomList = goodsBox.getElementsByClassName("goods-check");
//增加减少按钮
var lessBtnDom = goodsBox.getElementsByClassName("less-btn");
var addBtnDom = goodsBox.getElementsByClassName("add-btn");
//删除Dom
var delBtnDom = goodsBox.getElementsByClassName("del-goods");
//删除checked商品Dom
var delChecked =document.getElementById("del-checked");
//总价格Dom
var allPriceDom =document.getElementById("all-price");
//总积分Dom
var allIntegralDom =document.getElementById("all-integral");

// 页面初始化
getAllPrice();


// 全选事件
checkAllBtn.onclick = function(){
  var checkStatus = this.checked;   
  checkAll(checkDomList,checkStatus);
  getAllPrice();
}
//给商品check加事件
for (var index = 0; index < checkDomList.length; index++) {
  var checkDomCurrent = checkDomList[index]; 
  checkDomCurrent.onclick = function(){ 
    if(this.checked === false){
      checkAllBtn.checked = false; 
    }else{      
      checkAllBtn.checked = checkAllChecked(checkDomList);
    };
    getAllPrice();
  }
}
// 添加减少/增加事件
for (var index = 0; index < lessBtnDom.length; index++) {
  var lessDomCurrent = lessBtnDom[index];
  lessDomCurrent.onclick = function(){
    var inputDom = this.parentNode.getElementsByClassName("goods-num-input")[0];
    if(Number(inputDom.value)<=1){
      alert("产品不能再少了")
    }else{
      inputDom.value = Number(inputDom.value)-1;
      changePrice(this, Number(inputDom.value)) 
    }
  } 
}
for (var index = 0; index < addBtnDom.length; index++) {
  var addDomCurrent = addBtnDom[index];
  addDomCurrent.onclick = function(){
    var inputDom = this.parentNode.getElementsByClassName("goods-num-input")[0]; 
    inputDom.value = Number(inputDom.value)+1;
    changePrice(this, Number(inputDom.value)) 
  } 
}
// 删除方法添加到dom

for (var index = 0; index < delBtnDom.length; index++) {
  var delDomCurrent = delBtnDom[index];
  delDomCurrent.onclick = function(){
    var delDom = this.parentNode;
    goodsBox.removeChild(delDom);
    getAllPrice();
  } 
} 
 
//删除选中方法
delChecked.onclick = function(){  
  var delDom = [];
  for (var index = 0; index < checkDomList.length; index++) {   
    var element = checkDomList[index];  
    if(element.checked){  
      delDom.push(element.parentNode);
    } 
  }
  for(var i=0;i<delDom.length;i++){
    goodsBox.removeChild(delDom[i]);
  }
  getAllPrice();
} 

//价格变换方法
function changePrice(dom,num){
  var parentDom = dom.parentNode;
  var price = getAttr(parentDom,"goods-price");
  var integral = getAttr(parentDom,"goods-integral");
  var priceDom = parentDom.parentNode.getElementsByClassName("goods-total-price")[0];
  var checkDom = parentDom.parentNode.getElementsByClassName("goods-check")[0];
  var oldPrice = Number(priceDom.innerHTML); 
   var oldIntegral = Number(getAttr(priceDom,"data-total-integral"));
  priceDom.innerHTML = Number(price)*num;
  priceDom.setAttribute("data-total-integral",Number(integral)*num)
  //总价格改变
  //判断选中商品否
  if(checkDom.checked === false){
    return false;
  }
  var allPrice = Number(allPriceDom.innerHTML) || 0;
  var res = allPrice-oldPrice+Number(price)*num;
  allPriceDom.innerHTML = res;
  //总积分改变 
  var allIntegral = Number(allIntegralDom.innerHTML) || 0;
  var res2 = allIntegral-oldIntegral+Number(integral)*num;
  allIntegralDom.innerHTML = res2;
} 
// 全选方法
function checkAll(domList,status){
  for (var index = 0; index < domList.length; index++) {
    var element = domList[index];
    element.checked = status; 
  }
}
//检测是否全选
function checkAllChecked(domList){
  var checkNum = 0;
  for (var index = 0; index < domList.length; index++) {
    var element = domList[index];
    if(element.checked === false){
      return false;
    }else{
      checkNum++;
    }
    if(checkNum>=domList.length){
      return true;
    }
  }
}
// 方法定义
//价格积分初始化
function getAllPrice(){
  var allPrice=0;
  var allIntegral=0;
  for (var index = 0; index < checkDomList.length; index++) {
    if(checkDomList[index].checked === false){continue;}
    var element = checkDomList[index].parentNode.getElementsByClassName("goods-total-price")[0];
    var priceVal =element.innerHTML;
    var integralVal =getAttr(element,"data-total-integral");
    
    allPrice+=Number(priceVal); 
    allIntegral+=Number(integralVal);
  }
  allPriceDom.innerHTML = allPrice;
  allIntegralDom.innerHTML = allIntegral;
  
}
// 获取属性值 

function getAttr(dom,attr){
  var attrs = dom.attributes;  
  for(var i=0;i<attrs.length;i++){ 
    if(attrs[i].name === attr){
      return attrs[i].value;
    }
  }  
}

四.对应图片

在这里插入图片描述