Html
    Css
    Js

    
                        
@charset 'utf-8';
	* {
	margin:0;
	padding:0;
}
a {
	text-decoration:none;
}
div#shoppingCart {
	width:90%;
	margin:50px auto;
	font-size:14px;
}
div#shoppingCart div.cartMenu {
	display:flex;
	border-bottom:1px solid #F5F5F5;
	padding-bottom:10px;
	position:relative;
}
div#shoppingCart div.cartMenu div {
	text-align:center;
	flex:2;
}
div#shoppingCart div.cartMenu div:first-child {
	position:absolute;
	width:8.33%;
	text-align:center;
	left:0;
	top:0;
}
div#shoppingCart div.cartMenu div:nth-child(3) {
	flex:3;
}
div#shoppingCart div.cartBody article {
	display:flex;
	border:1px solid #DDD;
	border-radius:5px;
	margin:20px 0;
}
div#shoppingCart div.cartBody article div {
	flex:2;
	padding:20px 0;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
}
div#shoppingCart div.cartBody article div.info {
	flex:3;
	position:relative;
}
div#shoppingCart div.cartBody article div.info img {
	position:absolute;
	left:0;
	top:calc(50% - 50px);
	height:100px;
	width:100px;
}
div#shoppingCart div.cartBody article div.info p {
	margin-left:110px;
	width:calc(100% - 110px);
	text-align:justify;
	font-size:12px;
	line-height:20px;
	height:80px;
	box-sizing:border-box;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:4;
	overflow:hidden;
}
div#shoppingCart div.cartBody article div.price,div#shoppingCart div.cartBody article div.total {
	color:red;
	font-weight:bolder;
}
div#shoppingCart div.cartBody article div.number {
	display:flex;
}
div#shoppingCart div.cartBody article div.number span {
	border:1px solid #CCC;
	width:30px;
	height:35px;
	line-height:35px;
	box-sizing:border-box;
	cursor:pointer;
}
div#shoppingCart div.cartBody article div.number span:hover {
	background-color:#e6e6e6;
}
div#shoppingCart div.cartBody article div.number span:first-child {
	border-radius:5px 0 0 5px;
}
div#shoppingCart div.cartBody article div.number span:last-child {
	border-radius:0 5px 5px 0;
}
div#shoppingCart div.cartBody article div.number input {
	text-align:center;
	width:30px;
	height:35px;
	background-color:transparent;
	border:solid 1px #ccc;
	border-right:none;
	border-left:none;
	box-sizing:border-box;
}
div#shoppingCart div.cartBody article div. a {
	display:inline-block;
	border-radius:5px;
	color:#fff;
	width:55px;
	height:35px;
	line-height:35px;
	box-sizing:border-box;
	background-color:#d9534f;
	border-color:#d43f3a;
	transition:all 0.3s;
}
div#shoppingCart div.cartBody article div. a:hover {
	background-color:#C9302C;
}
div#shoppingCart div.cartBody > div.empty {
	text-align:center;
	margin:50px 0;
	background-color:#F5F5F5;
	padding:20px;
}
div#shoppingCart div.cartBody > div.empty img {
	width:150px;
}
div#shoppingCart div.cartBody > div.empty p:nth-child(2) {
	color:#858585;
	font-size:22px;
	line-height:1.5;
}
div#shoppingCart div.cartBody > div.empty p:nth-child(3) {
	color:#C0C0C0;
	line-height:2.5;
}
div#shoppingCart div.cartBody > div.empty p:nth-child(4) a {
	color:#878787;
	border:1px solid #ACACAC;
	border-radius:15px;
	padding:5px 15px;
	width:80px;
	display:inline-block;
	margin:10px 15px;
}
div#shoppingCart div.cartBody > div.empty p:nth-child(4) a:hover {
	color:red;
	border-color:red;
}
div#shoppingCart div.cartFoot {
	display:flex;
	background-color:#E5E5E5;
	justify-content:space-between;
	align-items:center;
	height:60px;
	box-sizing:border-box;
	border-radius:5px;
}
div#shoppingCart div.cartFoot div {
	flex:1;
	text-align:center;
}
div#shoppingCart div.cartFoot div a {
	color:#6495EC;
}
div#shoppingCart div.cartFoot div.zhanwei {
	flex:6;
}
div#shoppingCart div.cartFoot div.yixuan {
	flex:2;
}
div#shoppingCart div.cartFoot div.yixuan span {
	color:red;
	font-weight:bolder;
	padding:0 5px;
}
div#shoppingCart div.cartFoot div.heji span {
	color:red;
	font-weight:bolder;
}
div#shoppingCart div.cartFoot div.jiesuan {
	width:100%;
	height:100%;
	line-height:60px;
	font-size:16px;
}
div#shoppingCart div.cartFoot div.jiesuan a {
	display:inline-block;
	width:100%;
	height:100%;
	background-color:#B0B0B0;
	color:white;
	font-weight:bolder;
	border-radius:0 5px 5px 0;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.1
 立即下载

纯js仿淘宝购物车代码(原创)

更新时间:2020-07-19 12:01:22

css样式是参照本站一位大佬写的,附上大佬链接

http://www.jq22.com/jquery-info21795

但是css代码和js代码(方法老师传授,代码自己写的)完全是自己写的。本购物车为纯js实现,没有使用jquery、bootstrap等框架,js代码大部分都有注释。为了方便,我把购物车为空的状态和不为空的状态写在一起的,使用时删除对应html代码即可

0