参考学习内容:妙味课堂
//购物车案例
//reset.css
@charset "utf-8";
/* CSS Document */
/*html,body { user-select: none; -moz-user-select: none; -webkit-user-select: none; }*/
body,
ul,
ol,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
input,
select,
textarea,
form {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: 400;
}
html {
height: 100%;
background: #ededed;
}
body {
font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, STHeiti, 华文细黑, sans-serif;
color: rgb(102, 102, 102);
font-size: 14px;
min-width: 1220px;
}
li {
list-style: none;
}
img {
border: none;
display: block;
}
input,
select,
textarea,
button {
font-family: tahoma, arial, 'Hiragino Sans GB', '微软雅黑', sans-serif;
outline: none;
border: none;
background-color: transparent;
}
em,
i,
dfn {
font-style: normal;
}
textarea {
resize: none;
overflow: auto;
outline: none;
}
a {
text-decoration: none;
color: #666;
outline: none;
cursor: pointer;
}
a:hover {
outline: none;
}
button {
cursor: pointer;
}
button:focus {
border: none;
outline: none;
}
pre {
white-space: pre-wrap!important;
word-wrap: break-word!important;
*white-space:normal!important;
}
.fl {
float: left;
}
.fr {
float: right;
}
/*清浮动*/
.clear:after,
.clear:before {
content: "";
display: table;
}
.clear:after {
clear: both;
}
.clear {
*zoom: 1;
}
.store-content{
width: 1220px;
min-height: 600px;
padding: 0 0 25px;
margin: 0 auto;
position: relative;
}
.hide{
display: none!important;
}
.fn-left, .fn-right{
display: inline;
}
.fn-left{
float: left;
}
.fn-right{
float: right;
}
//cart.css
@charset "utf-8";
.cart-box{
position: relative;
margin-top: 40px;
overflow: hidden;
background: #fff;
border-radius: 8px;
border: 1px solid #dcdcdc;
border-color: rgba(0,0,0,.14);
box-shadow: 0 3px 8px -6px rgba(0,0,0,.1);
}
.cart-box .title{
position: relative;
z-index: 10;
height: 60px;
padding: 0 10px 0 30px;
border-bottom: 1px solid #d4d4d4;
border-radius: 8px 8px 0 0;
box-shadow: rgba(0,0,0,.06) 0 1px 7px;
background: #f3f3f3;
background: linear-gradient(#fbfbfb,#ececec);
line-height: 60px;
font-size: 18px;
color: #333;
}
.cart-box .cart-inner{
padding-bottom: 91px;
}
.cart-box .empty-label{
height: 49px;
padding: 385px 0 0 0;
background: url(../img/cart-box-empty.png) no-repeat center 50px;
text-align: center;
}
.cart-box .empty-label h3{
font-size: 14px;
line-height: 1.5;
color: #8d8d8d;
margin-bottom: 17px;
}
.cart-box .empty-label>a.link{
width: 151px;
line-height: 38px;
height: 38px;
border: 1px solid #e5e5e5;
border-radius: 4px;
display: inline-block;
color: #999;
font-size: 12px;
background: #f9f9f9;
background: -webkit-linear-gradient(#fff,#f0f0f0);
background: linear-gradient(#fff,#f0f0f0);
}
.cart-box .cart-table-title{
position: relative;
z-index: 1;
line-height: 38px;
height: 38px;
padding: 0 0 0 30px;
font-size: 12px;
background: #eee;
border-bottom: 1px solid #dbdbdb;
border-bottom-color: rgba(0,0,0,.08);
}
.cart-box .cart-table-title span {
float: right;
text-align: center;
}
.cart-box .cart-table-title .name{
float: left;
text-align: left;
}
.cart-box .cart-table-title .operation,
.cart-box .cart-table-title .num,
.cart-box .cart-table-title .price,
.cart-box .cart-table-title .subtotal{
width: 137px;
}
.cart-box .cart-table-title .subtotal{
text-align: right;
}
.cart-box .cart-group{
position: relative;
}
.cart-box .cart-group .cart-items{
border-top: 1px dashed #eee;
position: relative;
height: 140px;
margin-left: 74px;
}
.cart-box .cart-group .cart-top-items:first-child .cart-items{
border-top: none;
}
.cart-box .cart-items .items-choose, .cart-items .items-thumb, .cart-items .name{
float: left;
}
.cart-box .cart-items .items-choose{
position: absolute;
left: -74px;
top: 0;
width: 74px;
height: 20px;
padding: 60px 0 0 31px;
font-size: 12px;
color: #999;
}
.cart-box .blue-checkbox-new{
display: inline-block;
position: relative;
width: 20px;
height: 20px;
background: url(../img/checkbox-new.png) no-repeat 0 -20px;
cursor: pointer;
vertical-align: middle;
}
.cart-box .checkbox-on{
background: url(../img/checkbox-new.png) no-repeat 0 0;
}
.cart-box .cart-items .items-thumb{
position: relative;
margin-top: 30px;
overflow: hidden;
}
.cart-box .cart-items .items-thumb, .cart-items .items-thumb img{
width: 80px;
height: 80px;
}
.cart-box .cart-items .items-thumb>a, .cart-items .items-thumb>i{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 3px;
border: 0 solid rgba(255,255,255,.1);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.cart-box .cart-items .name{
width: 380px;
margin-left: 20px;
color: #323232;
display: table;
}
.hide-row{
overflow: hidden;
word-break: keep-all;
white-space: nowrap;
text-overflow: ellipsis;
}
.cart-items .name-table{
display: table-cell;
vertical-align: middle;
height: 140px;
}
.cart-items .name a{
color: #333;
font-size: 16px;
}
.cart-items .name .attribute, .cart-items .name p{
color: #999;
font-size: 12px;
padding-top: 4px;
line-height: 17px;
}
.hander-car .cart-items .name .attribute li{
float: left;
padding: 0 10px;
position: relative;
}
.hander-car .cart-items .name .attribute li:first-child{
padding-left: 0;
}
.hander-car .cart-items .item-cols-num,
.hander-car .cart-items .operation,
.hander-car .cart-items .price,
.hander-car .cart-items .subtotal{
overflow: hidden;
float: right;
width: 137px;
text-align: center;
color: #666;
line-height: 140px;
}
.hander-car .cart-items .operation{
padding: 58px 0 0;
font-size: 12px;
line-height: 24px;
}
.hander-car .cart-items .operation .items-delete-btn{
display: block;
width: 24px;
height: 24px;
margin: 0 auto;
color: #C2C2C2;
background: url(../img/delete-btn-icon.jpg);
background-size: 100% auto;
transition: none;
}
.cart-items .operation .items-delete-btn:hover{
background-position: 0 -36px;
}
.hander-car .cart-items .subtotal{
font-weight: 700;
text-align: right;
}
.cart-items .item-cols-num{
padding-top: 50px;
line-height: 40px;
}
.cart-items .select{
width: 112px;
height: 40px;
padding-top: 4px;
margin: 0 auto;
line-height: 40px;
}
.select .down, .select .up{
overflow: hidden;
float: left;
display: inline-block;
width: 34px;
height: 37px;
margin-right: 5px;
background: url(../img/cart-updown.jpg) no-repeat;
background-image: url(../img/cart-updown.jpg);
background-size: 100% auto;
line-height: 40px;
text-indent: -9999em;
cursor: pointer;
user-select: none;
}
.select .down{
background-position: 0 -60px;
}
.select .down:hover{
background-position: 0 -180px;
}
.select .down.down-disabled, .select .down.down-disabled:hover{
background-position: 0 -300px;
cursor: not-allowed;
}
.select .num{
position: relative;
overflow: hidden;
float: left;
display: inline-block;
width: 36px;
height: 18px;
margin: 7px 0 0;
border: none;
border-radius: 3px;
line-height: 18px;
text-align: center;
font-size: 14px;
}
.select input{
width: 36px;
height: 18px;
background-color: transparent;
border: none;
border-radius: 3px;
text-align: center;
line-height: 18px;
font-size: 14px;
padding: 0;
}
.select ul{
display: none;
position: absolute;
left: 0;
top: 0;
width: 36px;
}
.select ul li{
width: 36px;
height: 18px;
}
.select .up{
float: right;
margin: 0;
background-position: 0 0;
}
.select .up:hover{
background-position: 0 -120px;
}
.select .up.up-disabled, .select .up.up-disabled:hover{
background-position: 0 -240px;
cursor: not-allowed;
}
.gray-box .cart-bottom-bg{
/*height: 80px;
background: url(../img/store/library/cart-wrapper-bg.jpg) repeat-x;
border-top: 1px solid #D9D9D9;*/
border-radius: 0 0 8px 8px;
}
.fix-bottom{
height: 90px;
width: 100%;
position: absolute;
bottom: 0;
z-index: 1;
background-position: center;
background: #fdfdfd;
background: linear-gradient(#fdfdfd,#f9f9f9);
border-top: 1px solid #e9e9e9;
box-shadow: 0 -3px 8px rgba(0,0,0,.04);
}
.cart-bar-operation{
float: left;
padding: 35px 26px;
font-size: 12px;
}
.choose-all, .delete-choose-goods, .selected-count{
float: left;
height: 20px;
line-height: 20px;
cursor: pointer;
position: relative;
}
.delete-choose-goods{
position: relative;
margin-left: 21px;
color: #bbb;
}
.delete-choose-goods-disabled{
cursor: not-allowed;
}
.shipping{
display: inline-block;
float: right;
padding: 20px 30px;
}
.shipping-box{
display: inline-block;
padding-top: 1px;
margin-right: 10px;
}
.shipping-total{
display: inline-block;
border-left: 1px solid #e1e1e1;
padding: 0 20px;
}
.shipping-total:first-child{
border: none;
}
.shipping-total.shipping-num{
text-align: right;
}
.shipping-total h4{
color: #323232;
}
.shipping-total h4 i{
font-size: 18px;
font-weight: 700;
}
.shipping-total.shipping-num i{
width: 28px;
display: inline-block;
text-align: center;
}
.shipping-total h4.highlight i, .shipping-total h4.highlight span{
color: #d44d44;
}
.shipping-total h5{
color: #959595;
}
.shipping-total h5 i{
width: 28px;
display: inline-block;
text-align: center;
}
.shipping-total{
display: inline-block;
border-left: 1px solid #e1e1e1;
padding: 0 20px;
}
.shipping-total.shipping-price{
width: 155px;
padding-right: 0;
}
.blue-main-btn, .gray-main-btn, .jianguo-blue-main-btn{
display: block;
padding: 1px;
margin: 0 auto;
border-radius: 9px;
background: #015e94;
background: linear-gradient(#5598c9,#2a6da2);
text-align: center;
text-shadow: rgba(255,255,255,.496094) 0 1px 0;
cursor: pointer;
user-select: none;
}
.jianguo-blue-main-btn{
background: #567CE6;
background: linear-gradient(#799CEA,#567CE6);
box-shadow: 0 1px 3px rgba(0,0,0,.1), inset 0 -1px 2px rgba(0,0,0,.2);
}
.cart-box .big-main-btn{
height: 48px;
}
.cart-box .big-main-btn{
float: right;
background: #5d86e5;
background: -webkit-linear-gradient(#688fe8,#5079e1);
background: linear-gradient(#688fe8,#5079e1);
}
.cart-box .big-main-btn.jianguo-blue-main-btn.disabled-btn{
background: #A9A9A9;
background: linear-gradient(#BFBFBF,#999);
box-shadow: none;
}
.cart-box .blue-main-btn a, .gray-main-btn a, .jianguo-blue-main-btn a{
display: block;
padding: 2px 0;
border-radius: 9px;
background: #5f7ed7;
background: linear-gradient(#739fe1,#5f7ed7);
box-shadow: inset 0 1px 3px #92b6ec, inset 0 0 2px #627dca, inset 0 -2px 3px #4c69b8;
text-shadow: #4f70b3 0 -1px 0;
cursor: pointer;
color: #fff;
transition: all .3s ease;
}
.cart-box .jianguo-blue-main-btn a{
background: #6C94F3;
background: linear-gradient(#7EA3F5,#5A82F0);
box-shadow: none;
text-shadow: none;
color: #FFF;
transition: all .3s ease;
}
.cart-box .big-main-btn a{
height: 44px;
line-height: 45px;
font-size: 18px;
}
.cart-box .big-main-btn a{
padding: 2px 32px;
font-size: 16px;
}
.jianguo-blue-main-btn.disabled-btn a,
.jianguo-blue-main-btn.disabled-btn:active a,
.jianguo-blue-main-btn.disabled-btn:hover a{
background: #B7B7B7;
background: linear-gradient(#C3C3C3,#ABAAAA);
box-shadow: inset 0 1px 3px #CCC;
}
.disabled-btn, .disabled-btn a{
opacity: .7;
cursor: not-allowed;
}
//cart.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/cart.css"/>
</head>
<body>
<div id="main" class="hander-car">
<div class="store-content">
<div class="cart-box">
<div class="title">
<h2>购物清单</h2>
</div>
<div class="cart-inner">
<div>
<div class="cart-table-title">
<span class="name">商品信息</span>
<span class="operation">操作</span>
<span class="subtotal">小计</span>
<span class="num">数量</span>
<span class="price">单价</span>
</div>
<div class="cart-table">
<div class="cart-group">
<!--购物列表-->
<div class="cart-top-items">
<div class="cart-items">
<div class="items-choose">
<!-- 勾选商品 选中:checkbox-on -->
<span class="blue-checkbox-new"><a></a></span>
</div>
<div class="items-thumb">
<img src="./img/goods/s1.jpg">
<a href="javascript:;" target="_blank"></a>
</div>
<div class="name hide-row" >
<div class="name-table">
<a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 (后壳用)</a>
<ul class="attribute">
<li>透明</li>
</ul>
</div>
</div>
<div class="operation">
</div>
<!-- 小计 -->
<div class="subtotal">¥ 49.00</div>
<!-- 件数的操作 -->
<div class="item-cols-num">
<div class="select js-select-quantity">
<span class="down down-disabled">-</span>
<span class="num">
<input type="text" value="1" style="display: inline-block;">
</span>
<span class="up">+</span>
</div>
</div>
<!-- 单价 -->
<div class="price">¥ 100.00</div>
</div>
</div>
<div class="cart-top-items">
<div class="cart-items">
<div class="items-choose">
<span class="blue-checkbox-new"><a></a></span>
</div>
<div class="items-thumb">
<img src="./img/goods/s1.jpg">
<a href="javascript:;" target="_blank"></a>
</div>
<div class="name hide-row" >
<div class="name-table">
<a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 (后壳用)</a>
<ul class="attribute">
<li>透明</li>
</ul>
</div>
</div>
<div class="operation">
</div>
<div class="subtotal">¥ 49.00</div>
<div class="item-cols-num">
<div class="select js-select-quantity">
<span class="down down-disabled">-</span>
<span class="num">
<input type="text" value="1" style="display: inline-block;">
</span>
<span class="up">+</span>
</div>
</div>
<div class="price">¥ 200.00</div>
</div>
</div>
<div class="cart-top-items">
<div class="cart-items">
<div class="items-choose">
<span class="blue-checkbox-new"><a></a></span>
</div>
<div class="items-thumb">
<img src="./img/goods/s1.jpg">
<a href="javascript:;" target="_blank"></a>
</div>
<div class="name hide-row" >
<div class="name-table">
<a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 (后壳用)</a>
<ul class="attribute">
<li>透明</li>
</ul>
</div>
</div>
<div class="operation">
</div>
<div class="subtotal">¥ 49.00</div>
<div class="item-cols-num">
<div class="select js-select-quantity">
<span class="down down-disabled">-</span>
<span class="num">
<input type="text" value="4" style="display: inline-block;">
</span>
<span class="up">+</span>
</div>
</div>
<div class="price">¥ 49.00</div>
</div>
</div>
<div class="cart-top-items">
<div class="cart-items">
<div class="items-choose">
<span class="blue-checkbox-new"><a></a></span>
</div>
<div class="items-thumb">
<img src="./img/goods/s1.jpg">
<a href="javascript:;" target="_blank"></a>
</div>
<div class="name hide-row" >
<div class="name-table">
<a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 (后壳用)</a>
<ul class="attribute">
<li>透明</li>
</ul>
</div>
</div>
<div class="operation">
</div>
<div class="subtotal">¥ 49.00</div>
<div class="item-cols-num">
<div class="select js-select-quantity">
<span class="down down-disabled">-</span>
<span class="num">
<input type="text" value="2" style="display: inline-block;">
</span>
<span class="up">+</span>
</div>
</div>
<div class="price">¥ 58.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cart-bottom-bg fix-bottom">
<div class="cart-bar-operation">
<div>
<div class="choose-all js-choose-all">
<span class="blue-checkbox-new"><a></a></span>
全选
</div>
<!-- <div class="delete-choose-goods">删除选中的商品</div> -->
</div>
</div>
<div class="shipping">
<div class="shipping-box">
<div class="shipping-total shipping-num">
<h4 class="">
已选择 <i>0</i> 件商品
</h4>
<h5>
共计 <i >3</i> 件商品
</h5>
</div>
<div class="shipping-total shipping-price">
<h4 class="">
应付总额:<span>¥</span><i class="moneyall">0</i>
</h4>
<h5 class="shipping-tips">
应付总额不含运费
</h5>
</div>
</div>
<span class="jianguo-blue-main-btn big-main-btn js-checkout disabled-btn"><a>现在结算</a></span>
</div>
</div>
</div>
</div>
</div>
<script>
/*普通版本制作*/
/*
列表
- 勾选商品
- 数量
- 小计
统计
- 全选
- 已勾选商品件数
- 总计商品件数
- 总额计算
- 现在结算的点击
*/
var blueCheckboxes = document.querySelectorAll('.items-choose .blue-checkbox-new');
var ups = document.querySelectorAll('.up');
var downs = document.querySelectorAll('.down');
var numInputs = document.querySelectorAll('.num input');
var subtotals = document.querySelectorAll('.cart-top-items .subtotal');
var prices = document.querySelectorAll('.cart-top-items .price');
var chooseAll = document.querySelector('.choose-all .blue-checkbox-new');
var totalNum = document.querySelector('.shipping-total h5 i');
var checkedNum = document.querySelector('.shipping-total h4 i');
var nowBuy = document.querySelector('.jianguo-blue-main-btn');
var moneyall = document.querySelector('.moneyall');
var alltrue = false;
getTotalNum();
for(let i=0;i<blueCheckboxes.length;i++){
blueCheckboxes[i].isCheck = false;
blueCheckboxes[i].onclick = function(){
/* this.isCheck ? this.classList.remove('checkbox-on'):this.classList.add('checkbox-on');*/
this.classList[this.isCheck?'remove':'add']('checkbox-on');
this.isCheck = !this.isCheck;
setAllChecked();
setClass();
getCheckNum();
}
ups[i].onclick = function () {
let text = numInputs[i].value;
text = Math.min(10,Number(text)+1)
text == 10 && this.classList.add('up-disabled');
text > 1 && downs[i].classList.remove('down-disabled');
numInputs[i].value = text;
subtotals[i].innerHTML ='¥ ' + getPrice(prices[i].innerHTML,numInputs[i].value);
getTotalNum();
getCheckNum();
}
downs[i].onclick = function(){
let text = numInputs[i].value;
text = Math.max(1,Number(text)-1);
text == 1 && this.classList.add('down-disabled');
text < 10 && ups[i].classList.remove('up-disabled');
numInputs[i].value = text;
subtotals[i].innerHTML ='¥ ' + getPrice(prices[i].innerHTML,numInputs[i].value);
getTotalNum();
getCheckNum();
}
subtotals[i].innerHTML ='¥ ' + getPrice(prices[i].innerHTML,numInputs[i].value);
ups[i].classList[numInputs[i].value == 10?'add':'remove']('up-disabled');
downs[i].classList[numInputs[i].value == 1?'add':'remove']('down-disabled');
// getTotalNum();
}
//点击全选按钮
chooseAll.onclick = function(){
this.classList[alltrue?'remove':'add']('checkbox-on');
blueCheckboxes.forEach(item =>{
item.classList[!alltrue?'add':'remove']('checkbox-on')
item.isCheck = !alltrue;
})
alltrue = !alltrue;
setClass();
getCheckNum();
}
//处理小计
function getPrice(str,num){
var pricemoney = 0;
str = str.slice(1).trim();
pricemoney = parseFloat(str) * num;
return Number(pricemoney.toFixed(2));
}
//处理是否全选状态
function setAllChecked(){
var isAllChecked = [...blueCheckboxes].every(item=>item.isCheck);
alltrue = isAllChecked;
chooseAll.classList[isAllChecked?'add':'remove']('checkbox-on');
}
//获取总计件数
function getTotalNum(){
var totalnum = 0;
totalnum = [...numInputs].reduce((a,b)=>{
b = Number(b.value);
// var c = a+b;
return a+b;
},0)
totalNum.innerHTML = totalnum;
}
//设置现在结算按钮
function setClass(){
var isAllChecked = [...blueCheckboxes].some(item=>item.isCheck);
nowBuy.classList[isAllChecked?'remove':'add']('disabled-btn');
}
//设置选中的商品件数和应付金额
function getCheckNum(){
var checknum = 0;
var moneyA = 0;
blueCheckboxes.forEach((item,index)=>{
if(item.isCheck){
checknum += Number(numInputs[index].value);
moneyA += getPrice(prices[index].innerHTML,numInputs[index].value);
}
})
checkedNum.innerHTML = checknum;
moneyall.innerHTML = moneyA;
}
/**
选中: checkbox-on
结算按钮样式: disabled-btn
加减按钮禁用:down-disabled
*/
</script>
</body>
</html>