购物车
parent
2db3bd207b
commit
07fa17d60a
|
|
@ -1,119 +0,0 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
section {
|
||||
height: 1200px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
section .whole {
|
||||
padding: 15px 50px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
section .whole .whole-1 {
|
||||
margin: 20px auto;
|
||||
width: 1200px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .all {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .all h2 {
|
||||
font-weight: 600;
|
||||
color: #cb1919;
|
||||
float: left;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt {
|
||||
border-top: 2px solid #cb1919;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt ul .optall table {
|
||||
width: 100%;
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid #e0e0e0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt ul .optall #checkall {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt ul .optall th {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt ul .optall th span {
|
||||
margin-left: 85px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt #checklist .among {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt #checklist .among table {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt #checklist .among .box1 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt #checklist .among th {
|
||||
height: 115px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt #checklist .among th:nth-child(1) {
|
||||
width: 135px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt #checklist .among th:nth-child(1) img {
|
||||
padding: 10px;
|
||||
width: 82px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt #checklist .among th:nth-child(2) {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt #checklist .among th:nth-child(3), section .whole .whole-1 .opt #checklist .among th:nth-child(4), section .whole .whole-1 .opt #checklist .among th:nth-child(6) {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt #checklist .among th:nth-child(4) input {
|
||||
width: 90px;
|
||||
}
|
||||
section .whole .whole-1 .opt #checklist .among th:nth-child(5) {
|
||||
width: 120px;
|
||||
}
|
||||
section .whole .whole-1 .opt #checklist .among th:nth-child(5) input{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
section .whole .whole-1 .opt #checklist .among th:nth-child(5) input:nth-child(1), section .whole .whole-1 .opt #checklist .among th:nth-child(5) input:nth-child(3) {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt #checklist .among th:nth-child(5) input:nth-child(2) {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
section .whole .whole-1 .opt #checklist .among span {
|
||||
width: 400px;
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
@charset "UTF-8";
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -12,100 +13,167 @@ a {
|
|||
}
|
||||
|
||||
section {
|
||||
height: 1200px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
section .content {
|
||||
section .whoil {
|
||||
padding: 15px 50px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
section .content .all {
|
||||
display: inline-block;
|
||||
section .whoil .whoil-1 {
|
||||
margin: 20px auto;
|
||||
padding: 25px;
|
||||
/* 最外层盒子 */
|
||||
/* 图片 */
|
||||
/* 左右按钮 */
|
||||
/* 改变左右箭头、分页器的样式 */
|
||||
/* 单独修改分页器的css样式，swiper默认是10*10的span */
|
||||
/* 移动鼠标，隐藏显示左右按钮，配合js使用 */
|
||||
}
|
||||
|
||||
section .content .all h2 {
|
||||
section .whoil .whoil-1 .all {
|
||||
padding-bottom: 10px;
|
||||
float: left;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 .all h2 {
|
||||
font-weight: 600;
|
||||
color: #cb1919;
|
||||
float: left;
|
||||
padding-bottom: 10px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-bottom: #cb1919 2px solid;
|
||||
}
|
||||
|
||||
section .content .cartList {
|
||||
border-top: 2px solid #cb1919;
|
||||
section .whoil .whoil-1 table {
|
||||
width: 100%;
|
||||
border: 1;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0px 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
section .content .cartList .whoil {
|
||||
section .whoil .whoil-1 table thead {
|
||||
width: 100%;
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid #e0e0e0;
|
||||
border: 2px solid #000;
|
||||
margin-bottom: 20px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
section .content .cartList .whoil li {
|
||||
padding: 20px 46px;
|
||||
section .whoil .whoil-1 table thead th {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
section .content .cartList .whoil li:nth-child(1) {
|
||||
padding: 20px 10px;
|
||||
section .whoil .whoil-1 table thead th:nth-child(2) {
|
||||
float: left;
|
||||
}
|
||||
|
||||
section .content .cartList .whoil li:nth-child(1) img {
|
||||
section .whoil .whoil-1 table thead th input {
|
||||
float: left;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table tbody .inline {
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table tbody .inline td span {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
section .content .cartList .whoil li:nth-child(3) {
|
||||
width: 800px;
|
||||
section .whoil .whoil-1 table tbody .inline td:nth-child(1) {
|
||||
width: 70px;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
section .content .cartList .whoil li:nth-child(4), section .content .cartList .whoil li:nth-child(5), section .content .cartList .whoil li:nth-child(6), section .content .cartList .whoil li:nth-child(7) {
|
||||
float: right;
|
||||
section .whoil .whoil-1 table tbody .inline td:nth-child(n + 2) {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
section .content .cartList ul {
|
||||
width: 100%;
|
||||
section .whoil .whoil-1 table tbody .inline td:nth-child(n + 3) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table tbody .inline td:nth-child(4) span {
|
||||
width: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table tbody .inline td:nth-child(4) input {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table tfoot {
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid #e0e0e0;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
section .content .cartList ul li:nth-child(1) {
|
||||
padding: 20px 5px;
|
||||
section .whoil .whoil-1 table tfoot td:nth-child(1) {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
section .content .cartList ul li:nth-child(1) img {
|
||||
margin-left: 20px;
|
||||
margin-top: -10px;
|
||||
section .whoil .whoil-1 table tfoot td:nth-child(5) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
section .content .cartList ul li:nth-child(2) {
|
||||
padding: 25px 15px;
|
||||
width: 400px;
|
||||
section .whoil .whoil-1 table tfoot td:nth-child(5) #allPrice {
|
||||
color: #cb1919;
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
section .content .cartList ul li:nth-child(3) {
|
||||
width: 300px;
|
||||
section .whoil .whoil-1 table tfoot td:nth-child(6) span {
|
||||
background-color: #cb1919;
|
||||
padding: 15px 25px;
|
||||
}
|
||||
|
||||
section .content .cartList ul li:nth-child(5) {
|
||||
padding: 20px 5px;
|
||||
section .whoil .whoil-1 .swiper-container {
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
section .content .cartList ul li:nth-child(5) input {
|
||||
border: 0;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
section .whoil .whoil-1 .swiper-container .swiper-text {
|
||||
padding: 10px 5px;
|
||||
border-bottom: #e0e0e0 1px solid;
|
||||
}
|
||||
|
||||
section .content .cartList ul li:nth-child(4), section .content .cartList ul li:nth-child(5), section .content .cartList ul li:nth-child(6), section .content .cartList ul li:nth-child(7) {
|
||||
section .whoil .whoil-1 .swiper-wrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 .swiper-container img {
|
||||
display: block;
|
||||
height: 287px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 .swiper-container .swiper-button-prev,
|
||||
section .whoil .whoil-1 .swiper-container .swiper-button-next {
|
||||
height: 24px;
|
||||
margin: auto;
|
||||
float: right;
|
||||
}
|
||||
|
||||
section .content .cartList ol {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid #e0e0e0;
|
||||
section .whoil .whoil-1 .swiper-container {
|
||||
--swiper-theme-color: #ff6600;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 .swiper-container .swiper-pagination {
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 .swiper-container .swiper-pagination span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
--swiper-pagination-color: red;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 .swiper-container .hide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 .swiper-button-next,
|
||||
section .whoil .whoil-1 .swiper-button-prev {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
*{margin:0;padding:0}li{list-style:none}a{text-decoration:none}section{background-color:#f5f5f5}section .content{padding:15px 50px;margin:auto}section .content .all{display:inline-block}section .content .all h2{font-weight:600;color:#cb1919;float:left;padding-bottom:10px}section .content .cartList{border-top:2px solid #cb1919}section .content .cartList .whoil{width:100%;background-color:#f3f3f3;border:1px solid #e0e0e0;margin-bottom:20px;display:inline-flex}section .content .cartList .whoil li{padding:20px 46px}section .content .cartList .whoil li:nth-child(1){padding:20px 10px}section .content .cartList .whoil li:nth-child(1) img{margin-left:10px}section .content .cartList .whoil li:nth-child(3){width:800px}section .content .cartList .whoil li:nth-child(4),section .content .cartList .whoil li:nth-child(5),section .content .cartList .whoil li:nth-child(6),section .content .cartList .whoil li:nth-child(7){float:right}section .content .cartList ul{width:100%;background-color:#f3f3f3;border:1px solid #e0e0e0;display:inline-flex}section .content .cartList ul li:nth-child(1){padding:20px 5px}section .content .cartList ul li:nth-child(1) img{margin-left:20px;margin-top:-10px}section .content .cartList ul li:nth-child(2){padding:25px 15px;width:400px}section .content .cartList ul li:nth-child(3){width:300px}section .content .cartList ul li:nth-child(5){padding:20px 5px}section .content .cartList ul li:nth-child(5) input{border:0;outline:none;background-color:transparent}section .content .cartList ul li:nth-child(4),section .content .cartList ul li:nth-child(5),section .content .cartList ul li:nth-child(6),section .content .cartList ul li:nth-child(7){margin:auto;float:right}section .content .cartList ol{display:inline-flex;width:100%;background-color:#f3f3f3;border:1px solid #e0e0e0}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: #f5f5f5;
|
||||
.content {
|
||||
padding: 15px 50px;
|
||||
margin: auto;
|
||||
.all {
|
||||
display: inline-block;
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
color: #cb1919;
|
||||
float: left;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.cartList {
|
||||
border-top: 2px solid #cb1919;
|
||||
.whoil {
|
||||
width: 100%;
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid #e0e0e0;
|
||||
margin-bottom: 20px;
|
||||
display: inline-flex;
|
||||
li {
|
||||
padding: 20px 46px;
|
||||
&:nth-child(1) {
|
||||
padding: 20px 10px;
|
||||
img {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
width: 800px;
|
||||
}
|
||||
&:nth-child(4),
|
||||
&:nth-child(5),
|
||||
&:nth-child(6),
|
||||
&:nth-child(7) {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .checklist {
|
||||
// // padding: 20px 5px;
|
||||
// &:nth-child(1) {
|
||||
// padding: 20px 5px;
|
||||
// }
|
||||
// // &:nth-child(3) {
|
||||
// // width: 800px;
|
||||
// // }
|
||||
// // &:nth-child(4),
|
||||
// // &:nth-child(5),
|
||||
// // &:nth-child(6),
|
||||
// // &:nth-child(7) {
|
||||
// // width: 120px;
|
||||
// // padding: 20px 46px;
|
||||
// // }
|
||||
// }
|
||||
ul {
|
||||
width: 100%;
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid #e0e0e0;
|
||||
display: inline-flex;
|
||||
li {
|
||||
&:nth-child(1) {
|
||||
padding: 20px 5px;
|
||||
img {
|
||||
margin-left: 20px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
padding: 25px 15px;
|
||||
width: 400px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
width: 300px;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
padding: 20px 5px;
|
||||
input {
|
||||
border: 0; // 去除未选中状态边框
|
||||
outline: none; // 去除选中状态边框
|
||||
background-color: rgba(0, 0, 0, 0); // 透明背景
|
||||
}
|
||||
}
|
||||
&:nth-child(4),
|
||||
&:nth-child(5),
|
||||
&:nth-child(6),
|
||||
&:nth-child(7) {
|
||||
margin: auto;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
ol {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid #e0e0e0;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,174 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>购物车</title>
|
||||
<link rel="stylesheet" href="../../css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/logshoppingcar/shopcar2.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section>
|
||||
<div class="content">
|
||||
<!-- <div class="logo">
|
||||
<img src=""><span onclick="close_plan();">关闭</span>
|
||||
</div> -->
|
||||
<div class="whole">
|
||||
|
||||
<div class="all">
|
||||
<h2>全部商品(20)</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cartList" id="cartList">
|
||||
<ul class="whoil">
|
||||
<li> <input type="checkbox" id="checkall">
|
||||
<label for="value1">全选</label>
|
||||
</li>
|
||||
<li>商品</li>
|
||||
<li></li>
|
||||
<li>单价</li>
|
||||
<li>数量</li>
|
||||
<li>小计</li>
|
||||
<li>操作</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><input type="checkbox" name="arr[]" value="1">
|
||||
<label for="value1"></label>
|
||||
<img src="../../img/images/1-1.png"></li>
|
||||
<li>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</li>
|
||||
<li></li>
|
||||
<li>x3</li>
|
||||
<li>¥<input type="text" name="price" value="1688.00" disabled="true"></li>
|
||||
<li>
|
||||
<input type="button" name="minus" value="-" onclick="minus(0);" style="width: 15px;">
|
||||
<input type="text" name="amount" value="1" style="text-align: center;width: 40px;">
|
||||
<input type="button" name="plus" value="+" onclick="plus(0);" style="width: 15px;">
|
||||
</li>
|
||||
<li id="price0">¥1688.00</li>
|
||||
<li>
|
||||
|
||||
<p onclick="del(0);">删除</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><input type="checkbox" name="arr[]" value="1">
|
||||
<label for="value1"></label>
|
||||
<img src="../../img/images/1-1.png"></li>
|
||||
<li>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</li>
|
||||
<li></li>
|
||||
<li>x3</li>
|
||||
<li>¥<input type="text" name="price" value="18.00" disabled="true"></li>
|
||||
<li>
|
||||
<input type="button" name="minus" value="-" onclick="minus(0);" style="width: 15px;">
|
||||
<input type="text" name="amount" value="1" style="text-align: center;width: 40px;">
|
||||
<input type="button" name="plus" value="+" onclick="plus(0);" style="width: 15px;">
|
||||
</li>
|
||||
<li id="price0">¥18.00</li>
|
||||
<li>
|
||||
|
||||
<p onclick="del(0);">删除</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ol>
|
||||
<!-- <li>
|
||||
<input type="checkbox" id="checkall">
|
||||
<label for="value1">全选/取消</label>
|
||||
</li> -->
|
||||
<li id="totalPrice">商品总计：<span></span></li>
|
||||
<li><span onclick="accounts();">结 算</span></li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
<div style="display:none;"></div>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
$(function () {
|
||||
/*全选按钮状态显示判断*/
|
||||
$("#checklist").find("input[type='checkbox']").click(function () {
|
||||
/*初始化选择为TURE*/
|
||||
$("#checkall")[0].checked = true;
|
||||
/*获取未选中的*/
|
||||
var nocheckedList = new Array();
|
||||
$("#checklist").find('input:not(:checked)').each(function () {
|
||||
nocheckedList.push($(this).val());
|
||||
});
|
||||
/*状态显示*/
|
||||
if (nocheckedList.length == $("#checklist").find('input').length) {
|
||||
$("#checkall")[0].checked = false;
|
||||
$("#checkall")[0].indeterminate = false;
|
||||
} else if (nocheckedList.length) {
|
||||
$("#checkall")[0].indeterminate = true;
|
||||
} else {
|
||||
$("#checkall")[0].indeterminate = false;
|
||||
}
|
||||
});
|
||||
// 全选/取消
|
||||
$("#checkall").click(function () {
|
||||
// alert(this.checked);
|
||||
if ($(this).is(':checked')) {
|
||||
$("#checklist").find('input').each(function () {
|
||||
$(this).prop("checked", true);
|
||||
});
|
||||
} else {
|
||||
$("#checklist").find('input').each(function () {
|
||||
$(this).removeAttr("checked", false);
|
||||
$(this).prop("checked", false); // 根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
//减
|
||||
function minus(num) {
|
||||
var prices = document.getElementsByName("price")[num].value;
|
||||
var count = parseInt(document.getElementsByName("amount")[num].value) - 1;
|
||||
if (count < 1) {
|
||||
alert("不能再减了，再减就没有啦！");
|
||||
}
|
||||
else {
|
||||
document.getElementsByName("amount")[num].value = count;
|
||||
var totals = parseFloat(prices * count);
|
||||
document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);//.toFixed(2)表示四舍五入，取2位小数点
|
||||
total();
|
||||
}
|
||||
}
|
||||
//增
|
||||
function plus(num) {
|
||||
var prices = document.getElementsByName("price")[num].value;
|
||||
var count = parseInt(document.getElementsByName("amount")[num].value) + 1;
|
||||
document.getElementsByName("amount")[num].value = count;
|
||||
var totals = parseFloat(prices * count);
|
||||
document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);
|
||||
total();
|
||||
}
|
||||
//计算总额
|
||||
function total() {
|
||||
var prices = document.getElementsByName("price");
|
||||
var count = document.getElementsByName("amount");
|
||||
var sum = 0;
|
||||
for (var i = 0; i < prices.length; i++) {
|
||||
sum += prices[i].value * count[i].value;
|
||||
}
|
||||
document.getElementById("totalPrice").getElementsByTagName("span")[0].innerHTML = "¥" + sum.toFixed(2);
|
||||
}
|
||||
//结算
|
||||
function accounts() {
|
||||
var obj = document.getElementById("cartList").nextElementSibling;//.nextElementSibling表示下一个同辈元素
|
||||
obj.style.display = "block";
|
||||
var str = "您本次购买的商品信息好下：";
|
||||
str += "<br/>白岩松：白说：" + document.getElementById("price0").innerHTML;
|
||||
str += "<br/>岛上书店：" + document.getElementById("price1").innerHTML;
|
||||
str += "<br/>商品总计：" + document.getElementById("totalPrice").innerHTML;
|
||||
obj.innerHTML = str;
|
||||
}
|
||||
//删除
|
||||
function del(num) {
|
||||
var ocartList = document.getElementById("cartList");
|
||||
var delObj = document.getElementsByName("price")[num].parentNode.parentNode;
|
||||
ocartList.removeChild(delObj);
|
||||
total();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -1,176 +1,309 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>购物车</title>
|
||||
<link rel="stylesheet" href="../../css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/logshoppingcar/shopcar.css">
|
||||
<link rel="stylesheet" href="../../css/swiper-bundle.min.css">
|
||||
<link rel="stylesheet" href="../../css/logshoppingcar/shopcar2.css">
|
||||
<script src="../../js/swiper-bundle.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<section>
|
||||
<div class="whole">
|
||||
<div class="whole-1">
|
||||
<div class="all">
|
||||
<h2>全部商品(20)</h2>
|
||||
</div>
|
||||
<div class="whoil">
|
||||
<div class="whoil-1">
|
||||
<th>
|
||||
<div class="all">
|
||||
<h2>全部商品(20)</h2>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<!-- 选择 -->
|
||||
<div class="opt cartList" id="cartList">
|
||||
<ul>
|
||||
<li class="optall">
|
||||
<table>
|
||||
<th>
|
||||
<input type="checkbox" id="checkall">
|
||||
<label for="value1">全选</label>
|
||||
<span>商品</span>
|
||||
</th>
|
||||
<th>单价</th>
|
||||
<th>数量</th>
|
||||
<th>小计</th>
|
||||
<th>操作</th>
|
||||
</table>
|
||||
</li>
|
||||
<li></li>
|
||||
<ul id="checklist">
|
||||
<li class="among">
|
||||
<table>
|
||||
<th> <li><input type="checkbox" name="arr[]" value="1" class="box1">
|
||||
<label for="value1"><img src="../../img/images/1-1.png" alt=""></label></li>
|
||||
</th>
|
||||
<th><li>
|
||||
竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
|
||||
</li></th>
|
||||
<th>
|
||||
<li>x3</li>
|
||||
</th>
|
||||
<th>
|
||||
<li>￥<input type="text" name="price" value="1688.00" disabled="true"></li>
|
||||
</th>
|
||||
<th>
|
||||
<li>
|
||||
<input type="button" name="minus" value="-" onclick="minus(0);">
|
||||
<input type="text" name="amount" value="1">
|
||||
<input type="button" name="add" value="+" onclick="add(0);">
|
||||
</li>
|
||||
</th>
|
||||
<th>
|
||||
<li id="price0">￥564.6</li>
|
||||
</th>
|
||||
<th>
|
||||
<li>
|
||||
<p onclick="del(0);">删除</p>
|
||||
</li>
|
||||
</th>
|
||||
</table>
|
||||
</li>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" id="ckAll" onclick="checkAll()">全选</th>
|
||||
<th>商品</th>
|
||||
<th>单价</th>
|
||||
<th>数量</th>
|
||||
<th>小计</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="inline">
|
||||
<td><input type="checkbox" name="ck" onclick="check()"></td>
|
||||
<td><img src="../../img/images/1-1.png" alt=""><span>竹迪
|
||||
客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画
|
||||
11时来运转8190</span>
|
||||
<span> x3</span>
|
||||
</td>
|
||||
<td>188.00</td>
|
||||
<td>
|
||||
<span class="reduce" onclick="reduceCount(this)">-</span>
|
||||
<input type="text" value="1" class="count-input">
|
||||
<span class="add" onclick="addCount(this)">+</span>
|
||||
</td>
|
||||
<td>188.00</td>
|
||||
<td>
|
||||
<span class="delete" onclick="del(this)">删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="inline">
|
||||
<td><input type="checkbox" name="ck" onclick="check()"></td>
|
||||
<td><img src="../../img/images/1-2.png" alt=""><span>竹迪
|
||||
客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画
|
||||
11时来运转8190</span>
|
||||
<span> x3</span>
|
||||
</td>
|
||||
<td>188.00</td>
|
||||
<td>
|
||||
<span class="reduce" onclick="reduceCount(this)">-</span>
|
||||
<input type="text" value="1" class="count-input">
|
||||
<span class="add" onclick="addCount(this)">+</span>
|
||||
</td>
|
||||
<td>188.00</td>
|
||||
<td>
|
||||
<span class="delete" onclick="del(this)">删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="inline">
|
||||
<td><input type="checkbox" name="ck" onclick="check()"></td>
|
||||
<td><img src="../../img/images/1-3.png" alt=""><span>竹迪
|
||||
客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画
|
||||
11时来运转8190</span>
|
||||
<span> x3</span>
|
||||
</td>
|
||||
<td>188.00</td>
|
||||
<td>
|
||||
<span class="reduce" onclick="reduceCount(this)">-</span>
|
||||
<input type="text" value="1" class="count-input">
|
||||
<span class="add" onclick="addCount(this)">+</span>
|
||||
</td>
|
||||
<td>188.00</td>
|
||||
<td>
|
||||
<span class="delete" onclick="del(this)">删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="inline">
|
||||
<td><input type="checkbox" name="ck" onclick="check()"></td>
|
||||
<td><img src="../../img/images/1-4.png" alt=""><span>竹迪
|
||||
客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画
|
||||
11时来运转8190</span>
|
||||
<span> x3</span>
|
||||
</td>
|
||||
<td>188.00</td>
|
||||
<td>
|
||||
<span class="reduce" onclick="reduceCount(this)">-</span>
|
||||
<input type="text" value="1" class="count-input">
|
||||
<span class="add" onclick="addCount(this)">+</span>
|
||||
</td>
|
||||
<td>188.00</td>
|
||||
<td>
|
||||
<span class="delete" onclick="del(this)">删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot id="foot">
|
||||
<tr>
|
||||
<td><input type="checkbox" id="ckAll" onclick="checkAll()"> 全选</td>
|
||||
<td><span class="delete" onclick="del(this)">删除</span></td>
|
||||
<td></td>
|
||||
<td>总数：<span id="allCount"></span>件</td>
|
||||
<td>总价：￥<span id="allPrice"></span></td>
|
||||
<td><span id="accounts" onclick="accounts();">结算</span></td>
|
||||
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-text">
|
||||
推荐商品
|
||||
</div>
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide"><img src="../../img/images/1.png" alt=""></div>
|
||||
<div class="swiper-slide"><img src="../../img/images/2.png" alt=""></div>
|
||||
<div class="swiper-slide"><img src="../../img/images/3.png" alt=""></div>
|
||||
<div class="swiper-slide"><img src="../../img/images/4.png" alt=""></div>
|
||||
<div class="swiper-slide"><img src="../../img/images/1.png" alt=""></div>
|
||||
</div>
|
||||
<!-- 如果需要分页器 -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- 如果需要导航按钮 -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
<div style="display:none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var mySwiper = new Swiper('.swiper-container', {
|
||||
loop: true, // 循环模式
|
||||
slidesPerView: 5,//显示数量
|
||||
spaceBetween: 25,//图片间距
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
stopOnLastSlide: true,
|
||||
disableOnInteraction: true,//是否禁止自动切换
|
||||
},
|
||||
// 分页器
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,//点击跳转
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',//左按钮
|
||||
prevEl: '.swiper-button-prev',//右按钮
|
||||
},
|
||||
//鼠标移入变手
|
||||
grabCursor: true,
|
||||
})
|
||||
// 鼠标移入轮播图范围，执行的函数
|
||||
mySwiper.el.onmouseover = function () {
|
||||
mySwiper.autoplay.stop();
|
||||
mySwiper.navigation.$nextEl.removeClass('hide');
|
||||
mySwiper.navigation.$prevEl.removeClass('hide');
|
||||
}
|
||||
// 鼠标移出轮播图范围，执行的函数
|
||||
mySwiper.el.onmouseout = function () {
|
||||
mySwiper.autoplay.start();
|
||||
mySwiper.navigation.$nextEl.addClass('hide');
|
||||
mySwiper.navigation.$prevEl.addClass('hide');
|
||||
}
|
||||
|
||||
//获取元素
|
||||
var ckAll = document.getElementById('ckAll');
|
||||
var cks = document.getElementsByName('ck');
|
||||
var trs = document.getElementsByClassName('inline');
|
||||
var allCount = document.getElementById('allCount');
|
||||
var allPrice = document.getElementById('allPrice');
|
||||
var countInput = document.getElementsByClassName('count-input');
|
||||
var accounts = document.getElementById("accounts");
|
||||
// 结算
|
||||
// function accounts(){
|
||||
// var sum=0;
|
||||
// }
|
||||
// function accounts() {
|
||||
|
||||
// accounts.style.display = "block";
|
||||
// alert("")
|
||||
// accounts.innerHTML = str;
|
||||
// }
|
||||
|
||||
//计算总数
|
||||
function sumCount() {
|
||||
var sum = 0;
|
||||
for (var i = 0; i < cks.length; i++) {
|
||||
if (cks[i].checked == true) {
|
||||
var num = Number(countInput[i].value);
|
||||
sum += num;
|
||||
}
|
||||
}
|
||||
allCount.innerHTML = sum;
|
||||
}
|
||||
|
||||
//计算总价
|
||||
function sumPrice() {
|
||||
var sum = 0;
|
||||
for (var i = 0; i < cks.length; i++) {
|
||||
if (cks[i].checked == true) {
|
||||
var p = Number(trs[i].children[4].innerHTML);
|
||||
sum += p;
|
||||
}
|
||||
}
|
||||
allPrice.innerHTML = sum.toFixed(2);
|
||||
}
|
||||
|
||||
//计算每一行的总价
|
||||
function inlinePrice() {
|
||||
for (var i = 0; i < trs.length; i++) {
|
||||
//获取每一行单价
|
||||
var price = Number(trs[i].children[2].innerHTML);
|
||||
//获取数量
|
||||
var num = Number(trs[i].children[3].children[1].value);
|
||||
//小计
|
||||
trs[i].children[4].innerHTML = (price * num).toFixed(2);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// // 输入数量的最大值
|
||||
// functionb (num){
|
||||
// if(value.length<8){
|
||||
// var btn1 = document.getElementById("org");
|
||||
// btn1.insertBefore(input1, null);
|
||||
// }else{
|
||||
// alert("不能再添加");
|
||||
// }
|
||||
// }
|
||||
|
||||
//数量增加
|
||||
function addCount(e) {
|
||||
// 获取input标签里的value值,数量
|
||||
var num = parseInt(e.previousElementSibling.value);
|
||||
// 最大数量
|
||||
if (num > 98) {
|
||||
alert("不能再多了");
|
||||
return;
|
||||
}
|
||||
//数量加1
|
||||
e.previousElementSibling.value = num + 1;
|
||||
inlinePrice();
|
||||
sumPrice();
|
||||
sumCount();
|
||||
|
||||
}
|
||||
|
||||
//数量递减
|
||||
function reduceCount(e) {
|
||||
var num = parseInt(e.nextElementSibling.value);
|
||||
if (num <= 0) {
|
||||
alert("不能再减了");
|
||||
return;
|
||||
}
|
||||
|
||||
e.nextElementSibling.value = num - 1;
|
||||
inlinePrice();
|
||||
sumPrice();
|
||||
sumCount();
|
||||
}
|
||||
|
||||
//全选和反选
|
||||
function checkAll() {
|
||||
for (var i = 0; i < cks.length; i++) {
|
||||
cks[i].checked = ckAll.checked;
|
||||
}
|
||||
sumPrice();
|
||||
sumCount();
|
||||
}
|
||||
|
||||
//复选框的交互
|
||||
function check() {
|
||||
// 判断四个小的复选框有没有没被选中的,如果有一个,就把ckAllde的checked 变为false
|
||||
for (var i = 0; i < cks.length; i++) {
|
||||
if (cks[i].checked == false) {
|
||||
ckAll.checked = false;
|
||||
sumPrice();
|
||||
sumCount();
|
||||
// 有一个小复选框为false,就不需要对其他复选框进行判断了,直接中止函数下面的执行语句
|
||||
return;
|
||||
}
|
||||
}
|
||||
//循环结束后,如果小复选框checked的值都为true,ckAll的checked的值就为true
|
||||
ckAll.checked = true;
|
||||
sumPrice();
|
||||
sumCount();
|
||||
}
|
||||
|
||||
//单行删除
|
||||
function del(e) {
|
||||
e.parentElement.parentElement.remove();
|
||||
sumPrice();
|
||||
sumCount();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<script type="text/javascript" src="../../js/jquery-1.9.1.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
//计算总额
|
||||
function total() {
|
||||
var prices = document.getElementsByName("price");
|
||||
var count = document.getElementsByName("amount");
|
||||
var sum = 0;
|
||||
for (var i = 0; i < prices.length; i++) {
|
||||
sum += prices[i].value * count[i].value;
|
||||
}
|
||||
document.getElementById("totalPrice").getElementsByTagName("span")[0].innerHTML = "¥" + sum.toFixed(2);
|
||||
}
|
||||
//结算
|
||||
function accounts() {
|
||||
var obj = document.getElementById("cartList").nextElementSibling;//.nextElementSibling表示下一个同辈元素
|
||||
obj.style.display = "block";
|
||||
// var str = "您本次购买的商品信息好下：";
|
||||
// str += "<br/>白岩松：白说：" + document.getElementById("price0").innerHTML;
|
||||
// str += "<br/>岛上书店：" + document.getElementById("price1").innerHTML;
|
||||
// str += "<br/>商品总计：" + document.getElementById("totalPrice").innerHTML;
|
||||
// obj.innerHTML = str;
|
||||
}
|
||||
//删除
|
||||
function del(num) {
|
||||
var ocartList = document.getElementById("cartList");
|
||||
var delObj = document.getElementsByName("price")[num].parentNode.parentNode;
|
||||
ocartList.removeChild(delObj);
|
||||
total();
|
||||
}
|
||||
//增
|
||||
function add(num) {
|
||||
var prices = document.getElementsByName("price")[num].value;
|
||||
var count = parseInt(document.getElementsByName("amount")[num].value) + 1;
|
||||
document.getElementsByName("amount")[num].value = count;
|
||||
var totals = parseFloat(prices * count);
|
||||
document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);
|
||||
total();
|
||||
}
|
||||
//减
|
||||
function minus(num) {
|
||||
var prices = document.getElementsByName("price")[num].value;
|
||||
var count = parseInt(document.getElementsByName("amount")[num].value) - 1;
|
||||
if (count < 1) {
|
||||
alert("不能再减了，再减就没有啦！");
|
||||
}
|
||||
else {
|
||||
document.getElementsByName("amount")[num].value = count;
|
||||
var totals = parseFloat(prices * count);
|
||||
document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);//.toFixed(2)表示四舍五入，取2位小数点
|
||||
total();
|
||||
}
|
||||
}
|
||||
// $(function () {
|
||||
// /*全选按钮状态显示判断*/
|
||||
// $("#checklist").find("input[type='checkbox']").click(function () {
|
||||
// /*初始化选择为TURE*/
|
||||
// $(".checkall")[0].checked = true;
|
||||
// /*获取未选中的*/
|
||||
// var nocheckedList = new Array();
|
||||
// $("#checklist").find('input:not(:checked)').each(function () {
|
||||
// nocheckedList.push($(this).val());
|
||||
// });
|
||||
// /*状态显示*/
|
||||
// if (nocheckedList.length == $("#checklist").find('input').length) {
|
||||
// $(".checkall")[0].checked = false;
|
||||
// $(".checkall")[0].indeterminate = false;
|
||||
// } else if (nocheckedList.length) {
|
||||
// $(".checkall")[0].indeterminate = true;
|
||||
// } else {
|
||||
// $(".checkall")[0].indeterminate = false;
|
||||
// }
|
||||
// });
|
||||
// // 全选/取消
|
||||
// $(".checkall").click(function () {
|
||||
// // alert(this.checked);
|
||||
// if ($(this).is(':checked')) {
|
||||
// $("#checklist").find('input').each(function () {
|
||||
// $(this).prop("checked", true);
|
||||
// });
|
||||
// } else {
|
||||
// $("#checklist").find('input').each(function () {
|
||||
// $(this).removeAttr("checked", false);
|
||||
// $(this).prop("checked", false); // 根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue