js实现购物车效果（完整版）

GUfeifei___

于 2021-09-28 08:14:02 发布

阅读量2k

点赞数 4

文章标签： html css js

本文链接：https://blog.youkuaiyun.com/GUfeifei___/article/details/120477109

版权

本文详细介绍了如何使用JavaScript实现一个完整的购物车效果，包括效果的展示和具体代码的呈现，帮助读者理解JavaScript在购物车功能中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.购物车效果展示

在这里插入图片描述

2.代码展示

<!DOCTYPE html>
<html>
	<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
   
	margin:0px;
	padding:0px;
}.shop{
   
	width:900px;
	height:300px;
	border:1px solid red;
	margin:0 auto;
}.shoping{
   
	width:290px;
	height:300px;
	float:left;
	border:1px solid pink;
	margin-left:5px;
}.shoping>.imgs{
   
	width:200px;
	height:200px;
	margin:0 auto;
	border:1px solid gold;
	margin-top:10px;
}.imgs>img{
   
	width:200px;
	height: 200px;
}.car{
   
	width:900px;
	height:auto;
	/*border:1px solid blue;*/
	margin:0 auto;
	margin-top:10px;
}.shoping p{
   
	text-align: center;
}.gocar{
   
	width:100px;
	height:40px;
	background:red;
	border:none;
	color:#FFF;
}
#TB img{
   
	width: 100px;
	height: 100px;
}
</style