实现功能 

1.能够新增减少商品数量

2.能够新增商品种类

3.能够计算商品总价，总价随着商品数量变化而变化

整体思路

1.先写一个初始商品，包含名称，单价，描述，然后将其隐藏

2.克隆初始商品，重置其名称，单价，描述

3.点击新增，将克隆的商品添加进去

补充

1.一定要为初始商品添加事件监听器,否则初始商品无法+-del

2.每一步操作都要更新总价

完整代码

shopcar.html

	
	购物车
	


	
	
		
			
			
				
鲜花
					
单价10元
					
简介:平平无奇的一朵鲜花
					
				
				
					+
					0
					-
					del
				
			
		
		
			名称:
			单价:
			描述:
			
			
			

			
总价:0
			
		
	
	
	

shopcar.js

// 在页面加载完成后隐藏初始商品
document.addEventListener('DOMContentLoaded', function () {
    var initialProduct = document.querySelector(".unit");
    initialProduct.style.display = 'none';
});
// 增加商品函数
function addProductEventListener(newUnit) {
    var geshu = 0;
    var addButton = newUnit.querySelector(".add");
    var subButton = newUnit.querySelector(".sub");
    var deleButton = newUnit.querySelector(".delete");
    var geshuDisplay = newUnit.querySelector(".geshu");
    var unitPrice = parseFloat(newUnit.querySelector(".jiage").textContent);
    //------➕增加按钮
    addButton.addEventListener('click', function () {
        geshu++;
        // 更新个数展示区域的数字
        geshuDisplay.textContent = geshu;
        // 更新总价
        sum.textContent = zongjia();
    });
    //------➖减少按钮
    subButton.addEventListener('click', function () {
        if (geshu > 0) {
            geshu--;
            geshuDisplay.textContent = geshu;
            sum.textContent = zongjia();
        }
        else {
            alert("已经是0,不能再减少了!");
        }
    });
    //------del删除按钮
    deleButton.addEventListener('click', function () {
        newUnit.remove();
        // 更新总价
        sum.textContent = zongjia();
    });
    //------总价
    sum.textContent = zongjia();
    function zongjia() {
        var zj = 0;
        // 遍历所有的商品
        var unitDisplay = document.querySelectorAll(".unit");
        unitDisplay.forEach(function (unit) {
            var jiage = parseFloat(unit.querySelector(".jiage").textContent);
            var geshu = parseInt(unit.querySelector(".geshu").textContent);
            // 计算总价=个数*价格
            zj += geshu * jiage;
        });
        return zj;
    }
}
// 调用增加商品函数
// 一定要为初始商品添加事件监听器,否则初始商品无法+-del
addProductEventListener(document.querySelector(".unit"));
//------新增商品种类
// 提交按钮
var tijiaoButton = document.querySelector("#tijiao")
tijiaoButton.addEventListener('click', function () {
    var name = document.querySelector("#name").value;
    var price = document.querySelector("#price").value;
    var description = document.querySelector("#description").value;
    // var imageUpload = document.querySelector("#imageUpload").files[0]; // 获取上传的图片文件
    // 克隆之前存在的那个商品
    var unitclone = document.querySelector(".unit").cloneNode(true);
    // 显示克隆的商品
    unitclone.style.display = 'inline-block';
    unitclone.querySelector("p").textContent = name;
    unitclone.querySelector(".jiage").textContent = price;
    unitclone.querySelector(".geshu").textContent = 0;//一定要个数归0,否则会克隆初始商品的个数
    unitclone.querySelector("p:nth-of-type(3)").textContent = "描述" + description;
    // 将新克隆的商品元素添加到页面中
    document.querySelector("#list").appendChild(unitclone);
    // 为新增商品添加事件监听器
    addProductEventListener(unitclone);
    // 更新总价
    sum.textContent = zongjia();
});

shopcar.css

* {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
/* 整个大框框 */
#frame {
    width: 700px;
    height: 500px;
    border: 2px solid black;
    /* 居中 */
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}
/* 底部的商品列表 */
#list {
    width: 100%;
    height: 430px;
    border-bottom: 1px solid black;
    overflow-y: scroll;
}
/* 单个商品样式 */
.unit {
    width: 90%;
    height: 90px;
    margin: 10px auto;
    border: 1px solid black;
}
/* 放置商品图片 */
.unit>img {
    width: 20%;
    height: 100%;
    float: left;
}
/* 放置商品信息和按钮 */
.unit>div {
    width: 40%;
    height: 100%;
    float: left;
}
/* 选择所有带有class为unit的元素
    的最后一个直接子div内的所有直接子div
    就是➕➖ */
.unit>div:last-child>div {
    width: 25%;
    height: 100%;
    float: left;
    /* 设置行高居中 */
    font-size: 30px;
    color: #ff8f8f;
    line-height: 270%;
}
/* 悬停变色,让这个元素看上去更像按钮 */
.unit>div:last-child>div:hover {
    font-size: 30px;
    color: #ff0000;
}
/* 设置面板 */
#set {
    width: 100%;
    height: 100px;
}