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

最新推荐文章于 2024-09-05 23:05:05 发布

原创

最新推荐文章于 2024-09-05 23:05:05 发布 · 2.1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #js

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

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: 100