一.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;
}
}
}
四.对应图片
