简易购物车（HTML/CSS/JS）

鱼丸子蛋汤

已于 2024-03-18 23:14:09 修改

阅读量1.5k

点赞数 7

分类专栏：前端项目文章标签： windows css 前端 javascript html

于 2024-03-18 23:01:18 首次发布

本文链接：https://blog.csdn.net/weixin_52841164/article/details/136824887

版权

前端项目专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用JavaScript在HTML页面上实现购物车功能，包括商品的添加、数量控制、总价计算以及克隆商品。通过事件监听器处理商品的增减操作，并确保初始商品支持删除功能。

摘要由CSDN通过智能技术生成

实现功能

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

2.能够新增商品种类

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

整体思路

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

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

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

补充

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

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

完整代码

shopcar.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>购物车</title>
	<link rel="stylesheet" type="text/css" href="shopcar.css">
</head>

<body>
	<!-- 整体框架 -->
	<div id="frame">
		<div id="list">
			<!-- 单个元素样式案例 -->
			<div class="unit">
				<img src="./img/img1.jpg" alt="">
				<div>
					<p>鲜花</p>
					<p>单价<b class="jiage">10</b>元</p>
					<p>简介:平平无奇的一朵鲜花</p>
					
				</div>
				<div>
					<div class="add">+</div>
					<div class="geshu">0</div>
					<div class="sub">-</div>
					<div class="delete">del</div>
				</div>
			</div>
		</div>
		<div id="set">
			名称:<input type="text" id="name">
			单价:<input type="text" id="price">
			描述:<input type="text" id="description">
			<!-- 
            添加图片:<input type="file" id="imageUpload"> 
            -->
			<input id="tijiao" type="button" value="新增">
			<p>
			<h1>总价:<b id="sum">0</b></h1>
			</p>
		</div>
	</div>
	<script src="shopcar.js"></script>
	
</body>

</html>

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;
}