网上关于购物车实现的代码非常多，本次的这篇文章主要是和大家分享悦轩饼家的购物车界面，有需要的小伙伴可以看一下，接下来讲解一下具体的实现。
下面是悦轩饼家购物车展示部分：
html部分：
<div class="container2">
<!-- 订单列表 -->
<div class="cart-panel">
<div class="hd">
<ul class="order-title">
<li class="selecter"></li>
<li class="product">商品名称</li>
<li class="market-price">市场价</li>
<li class="order-price">订购价(8折)</li>
<li class="num">数量</li>
<li class="operate">操作</li>
</ul>
</div>
<div class="bd">
<ul class="order-list">
<li class="selecter">
<i class="icon-select active"></i>
</li>
<li class="img-box">
<a href="#" target="_blank">
<img src="img/cake1.jpg">
</a>
</li>
<li class="product">
<a href="#" target="_blank">
<span class="product-title" style="line-height:40px;">[悦轩饼家蛋糕]榴芒双拼(约2磅)一双拼蛋糕</span>
<span class="feature"></span>
</a>
</li>
<li class="market-price">
<span class="price-sign">¥</span>
<span class="price-num">298</span>
</li>
<li class="order-price">
<span class="price-sign">¥</span>
<span class="price-num">198</span>
</li>
<li class="num">
<div class="number-box">
<input type="button" class="sub-number" value="减">
<input type="text" value="5" class="txt-num">
<input type="button" class="add-number" value="加">
</div>
</li>
<li class="operate">
<a href="javascript:void(0)" class="delBtn">删除</a>
</li>
</ul>
<ul class="order-list">
<li class="selecter">
<i class="icon-select active"></i>
</li>
<li class="img-box">
<a href="#" target="_blank">
<img src="img/cake2.jpg">
</a>
</li>
<li class="product">
<a href="#" target="_blank">
<span class="product-title" style="line-height:40px;">[悦轩饼家蛋糕]芒果千层(900g)</span>
<span class="feature"></span>
</a>
</li>
<li class="market-price">
<span class="price-sign">¥</span>
<span class="price-num">289</span>
</li>
<li class="order-price">
<span class="price-sign">¥</span>
<span class="price-num">169</span>
</li>
<li class="num">
<div class="number-box">
<input type="button" class="sub-number" value="减">
<input type="text" value="2" class="txt-num">
<input type="button" class="add-number" value="加">
</div>
</li>
<li class="operate">
<a href="javascript:void(0)" class="delBtn">删除</a>
</li>
</ul>
<ul class="order-list">
<li class="selecter">
<i class="icon-select"></i>
</li>
<li class="img-box">
<a href="#" target="_blank">
<img src="img/cake3.jpg">
</a>
</li>
<li class="product">
<a href="#" target="_blank">
<span class="product-title" style="line-height:40px;">[悦轩饼家蛋糕]榴莲香雪(约2磅)一榴莲蛋糕</span>
<span class="feature"></span>
</a>
</li>
<li class="market-price">
<span class="price-sign">¥</span>
<span class="price-num">269</span>
</li>
<li class="order-price">
<span class="price-sign">¥</span>
<span class="price-num">149</span>
</li>
<li class="num">
<div class="number-box">
<input type="button" class="sub-number" value="减">
<input type="text" value="1" class="txt-num">
<input type="button" class="add-number" value="加">
</div>
</li>
<li class="operate">
<a href="javascript:void(0)" class="delBtn">删除</a>
</li>
</ul>
</div>
</div>
<!-- 订单列表 end-->
<!-- 结算 -->
<div class="set-bar">
<div class="set-info">
<div class="set-stat">
应付金额:
<div class="price">
<span class="price-sign">¥</span>
<span class="price-num" id="totalMoney">565</span>
</div>
</div>
</div>
<button class="btn btn-primary btn-lg" type="button" id="jiesuan"><a
href="xinxibiao.html">去结算</a></button>
</div>
<!-- 结算 End -->
</div>css部分：
/* 重置基础样式 */
* {
margin: 0;
padding: 0;
}
.container2 a {
color: #333333;
text-decoration: none;
}
.container2 a:hover {
color: darksalmon;
}
/* 订单列表 */
.container2 {
width: 990px;
border-top: 1px solid #E9ECF0;
margin: 20px auto 120px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container2 .cart-panel {
margin-bottom: 20px;
border: 1px solid #d9d9d9;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .hd {
height: 46px;
margin: 0;
padding: 0 20px;
list-style: none;
background-color: #ebebeb;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-title {
margin: 0;
padding: 0;
list-style: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-title:before,
.cart-panel .order-title:after {
content: " ";
display: table;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-title li.selecter {
width: 36px;
height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-title li {
font-family: tahoma, arial, 'Hiragino Sans GB', '\5FAE\8F6F\96C5\9ED1', sans-serif;
font-weight: bold;
display: inline-block;
float: left;
padding: 10px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-title li.product {
width: 432px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-title li.market-price,
.cart-panel .order-title li.order-price,
.cart-panel .order-title li.num,
.cart-panel .order-title li.operate {
text-align: center;
width: 120px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .bd {
margin: 0;
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list:first-child {
border-top: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list {
font-size: 12px;
margin: 0;
padding: 15px 0;
list-style: none;
border-top: 2px dotted #d9d9d9;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list:before,
.cart-panel .order-list:after {
content: " ";
display: table;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list:after {
clear: both;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list .selecter {
width: 36px;
height: 88px;
text-align: left;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list li {
line-height: 40px;
display: inline-block;
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list .selecter .icon-select {
width: 20px;
height: 20px;
margin-top: 34px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list .icon-select {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-image: url(../img/ico_unchecked.png);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list .icon-select.active {
background-image: url(../img/ico_checkout.png);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list li.img-box {
width: 100px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list li.img-box img {
width: 80px;
height: 88px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list li.product {
width: 332px;
padding: 24px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list li.product span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list li.product .feature {
color: #ff6a00;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list li.market-price {
width: 120px;
padding: 0;
line-height: 88px;
text-decoration: line-through;
color: #999999;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.price-sign {
font-family: arial;
margin-right: -4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.price-num {
font-family: arial, Verdana, Arial;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list li.order-price {
width: 118px;
padding: 0;
line-height: 88px;
color: #232628;
font-weight: normal;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list li.num {
width: 122px;
line-height: 88px;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list:after {
clear: both;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cart-panel .order-list li.operate {
width: 120px;
font-size: 12px;
padding: 24px 0 24px 42px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* 结算 */
.set-bar {
margin-bottom: 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.set-bar .set-info {
font-size: 12px;
line-height: 52px;
float: left;
width: 870px;
height: 52px;
padding: 0 20px;
border: 1px solid #d9d9d9;
border-right: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.set-bar .set-info .set-stat {
float: right;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.set-bar .set-info .set-stat .price {
font-size: 18px;
font-weight: bold;
display: inline-block;
color: #ff6a00;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.set-bar .btn-lg {
font-weight: bold;
float: right;
width: 120px;
height: 52px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
color: #ffffff;
background-color: #ff6a00;
border-color: #ff6a00;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* 加减按钮样式 */
.number-box {
border: #e5e5e5 solid 1px;
display: inline-block;
margin-top: 26px;
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.number-box input[type='text'] {
height: 30px;
border-top: none;
border-bottom: none;
border-left: #e5e5e5 solid 1px;
border-right: #e5e5e5 solid 1px;
margin: 0;
text-align: center;
width: 40px;
outline: none;
padding: 0 5px;
float: left;
line-height: 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.number-box input[type='button'] {
height: 30px;
width: 40px;
float: left;
border: none;
outline: none;
background-color: #f3f3f3;
line-height: 30px;
cursor: pointer;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.number-box input[type='button']:hover {
background-color: #f9f9f9;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.number-box input[type='button']:active {
background-color: #f6f6f6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#jiesuan>a{
color: white;
}js部分：
$(function() {
zongjia();
var flar = false;
// 选中状态切换
$('.order-list').on('click', '.icon-select', function() {
$(this).toggleClass('active');
zongjia();
})
// 添加数据
$('.order-list .add-number').on('click', function() {
var num = parseInt($(this).parent().find('.txt-num').val());
num++;
$(this).parent().find('.txt-num').val(num);
$(this).parent().find('.sub-number').removeAttr('disabled');
zongjia();
})
//减少数量
$('.order-list .sub-number').on('click', function() {
var num = parseInt($(this).parent().find('.txt-num').val());
num--;
if (num <= 0) {
num = 0;
$(this).attr('disabled', 'disabled');
$(this).parent().find('.txt-num').val(num);
} else {
$(this).parent().find('.txt-num').val(num);
}
zongjia();
})
// 删除商品
$('.order-list .delBtn').on('click', function() {
if (confirm("确认从购物车中移除该商品？")) {
// $(this).parent().parent().remove();
$(this).closest('.order-list').remove();
zongjia();
}
})
// 总金额
function zongjia() {
var number = 0;
$('.order-list').each(function(index, ele) {
// 判断是否勾选
if ($(ele).find('.icon-select').hasClass('active')) {
// 计算勾选的金额
var price = parseInt($(ele).find('.order-price').find('.price-num').text());
var count = parseInt($(ele).find('.number-box').find('.txt-num').val());
number += price * count;
}
})
$("#totalMoney").text(number)
}效果图：
感觉没啥好说的。。。
还请各位大佬来补充！！！
321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
