chen
/
huaxia
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

购物车

master
YDD 2021-09-09 17:58:19 +08:00
parent 2db3bd207b
commit 07fa17d60a
6 changed files with 402 additions and 610 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
css/logshoppingcar/shopcar.css
View File

@ -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;
}

164
css/logshoppingcar/shopcar2.css
View File

@ -1,3 +1,4 @@
@charset "UTF-8";
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -12,100 +13,167 @@ a {
} }
section { section {
height: 1200px;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
section .content { section .whoil {
padding: 15px 50px; padding: 15px 50px;
margin: auto;
} }
section .content .all { section .whoil .whoil-1 {
display: inline-block; 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; font-weight: 600;
color: #cb1919; color: #cb1919;
float: left; padding: 20px;
padding-bottom: 10px; background-color: #fff;
border-bottom: #cb1919 2px solid;
} }
section .content .cartList { section .whoil .whoil-1 table {
border-top: 2px solid #cb1919; 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%; width: 100%;
background-color: #f3f3f3; background-color: #f3f3f3;
border: 1px solid #e0e0e0; border: 2px solid #000;
margin-bottom: 20px; margin-bottom: 20px;
display: inline-flex;
} }
section .content .cartList .whoil li { section .whoil .whoil-1 table thead th {
padding: 20px 46px; padding: 10px 20px;
} }
section .content .cartList .whoil li:nth-child(1) { section .whoil .whoil-1 table thead th:nth-child(2) {
padding: 20px 10px; 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; margin-left: 10px;
} }
section .content .cartList .whoil li:nth-child(3) { section .whoil .whoil-1 table tbody .inline td:nth-child(1) {
width: 800px; 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) { section .whoil .whoil-1 table tbody .inline td:nth-child(n + 2) {
float: right; padding: 10px 20px;
} }
section .content .cartList ul { section .whoil .whoil-1 table tbody .inline td:nth-child(n + 3) {
width: 100%; 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; background-color: #f3f3f3;
border: 1px solid #e0e0e0;
display: inline-flex;
} }
section .content .cartList ul li:nth-child(1) { section .whoil .whoil-1 table tfoot td:nth-child(1) {
padding: 20px 5px; padding: 10px 20px;
} }
section .content .cartList ul li:nth-child(1) img { section .whoil .whoil-1 table tfoot td:nth-child(5) {
margin-left: 20px; width: 200px;
margin-top: -10px;
} }
section .content .cartList ul li:nth-child(2) { section .whoil .whoil-1 table tfoot td:nth-child(5) #allPrice {
padding: 25px 15px; color: #cb1919;
width: 400px; font-size: 30px;
font-weight: 800;
} }
section .content .cartList ul li:nth-child(3) { section .whoil .whoil-1 table tfoot td:nth-child(6) span {
width: 300px; background-color: #cb1919;
padding: 15px 25px;
} }
section .content .cartList ul li:nth-child(5) { section .whoil .whoil-1 .swiper-container {
padding: 20px 5px; width: 100%;
height: 380px;
background-color: #fff;
} }
section .content .cartList ul li:nth-child(5) input { section .whoil .whoil-1 .swiper-container .swiper-text {
border: 0; padding: 10px 5px;
outline: none; border-bottom: #e0e0e0 1px solid;
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) { 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; margin: auto;
float: right;
} }
section .content .cartList ol { section .whoil .whoil-1 .swiper-container {
display: inline-flex; --swiper-theme-color: #ff6600;
width: 100%; }
background-color: #f3f3f3;
border: 1px solid #e0e0e0; 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
css/logshoppingcar/shopcar2.min.css vendored
View File

@ -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}

115
css/logshoppingcar/shopcar2.scss
View File

@ -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;
}
}
}
}

174
htmls/logshoppingcar/shopcar copy.html
View File

@ -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>

439
htmls/logshoppingcar/shopcar.html
View File

@ -1,176 +1,309 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head lang="en">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title> <title>购物车</title>
<link rel="stylesheet" href="../../css/layui.css"> <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> </head>
<body> <body>
<section> <section>
<div class="whole"> <div class="whoil">
<div class="whole-1"> <div class="whoil-1">
<div class="all"> <th>
<h2>全部商品(20)</h2> <div class="all">
</div> <h2>全部商品(20)</h2>
</div>
</th>
<!-- 选择 --> <!-- 选择 -->
<div class="opt cartList" id="cartList"> <table>
<ul> <thead>
<li class="optall"> <tr>
<table> <th><input type="checkbox" id="ckAll" onclick="checkAll()">全选</th>
<th> <th>商品</th>
<input type="checkbox" id="checkall"> <th>单价</th>
<label for="value1">全选</label> <th>数量</th>
<span>商品</span> <th>小计</th>
</th> <th>操作</th>
<th>单价</th> </tr>
<th>数量</th> </thead>
<th>小计</th> <tbody>
<th>操作</th> <tr class="inline">
</table> <td><input type="checkbox" name="ck" onclick="check()"></td>
</li> <td><img src="../../img/images/1-1.png" alt=""><span>竹迪
<li></li> 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画
<ul id="checklist"> 11时来运转8190</span>
<li class="among"> <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x3</span>
<table> </td>
<th> <li><input type="checkbox" name="arr[]" value="1" class="box1"> <td>188.00</td>
<label for="value1"><img src="../../img/images/1-1.png" alt=""></label></li> <td>
</th> <span class="reduce" onclick="reduceCount(this)">-</span>
<th><li> <input type="text" value="1" class="count-input">
竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190 <span class="add" onclick="addCount(this)">+</span>
</li></th> </td>
<th> <td>188.00</td>
<li>x3</li> <td>
</th> <span class="delete" onclick="del(this)">删除</span>
<th> </td>
<li>￥<input type="text" name="price" value="1688.00" disabled="true"></li> </tr>
</th> <tr class="inline">
<th> <td><input type="checkbox" name="ck" onclick="check()"></td>
<li> <td><img src="../../img/images/1-2.png" alt=""><span>竹迪
<input type="button" name="minus" value="-" onclick="minus(0);"> 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画
<input type="text" name="amount" value="1"> 11时来运转8190</span>
<input type="button" name="add" value="+" onclick="add(0);"> <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x3</span>
</li> </td>
</th> <td>188.00</td>
<th> <td>
<li id="price0">￥564.6</li> <span class="reduce" onclick="reduceCount(this)">-</span>
</th> <input type="text" value="1" class="count-input">
<th> <span class="add" onclick="addCount(this)">+</span>
<li> </td>
<p onclick="del(0);">删除</p> <td>188.00</td>
</li> <td>
</th> <span class="delete" onclick="del(this)">删除</span>
</table> </td>
</li> </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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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()">&nbsp;&nbsp;全选</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> <div class="swiper-container">
</li> <div class="swiper-text">
</ul> 推荐商品
</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>
<div style="display:none;"></div>
</div> </div>
</div>
</section> </section>
</body> <script>
<script type="text/javascript" src="../../js/jquery-1.9.1.js"></script> var mySwiper = new Swiper('.swiper-container', {
<script type="text/javascript"> loop: true, // 循环模式
slidesPerView: 5,//显示数量
//计算总额 spaceBetween: 25,//图片间距
function total() { autoplay: {
var prices = document.getElementsByName("price"); delay: 3000,
var count = document.getElementsByName("amount"); stopOnLastSlide: true,
var sum = 0; disableOnInteraction: true,//是否禁止自动切换
for (var i = 0; i < prices.length; i++) { },
sum += prices[i].value * count[i].value; // 分页器
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');
} }
document.getElementById("totalPrice").getElementsByTagName("span")[0].innerHTML = "¥" + sum.toFixed(2); // 鼠标移出轮播图范围，执行的函数
} mySwiper.el.onmouseout = function () {
//结算 mySwiper.autoplay.start();
function accounts() { mySwiper.navigation.$nextEl.addClass('hide');
var obj = document.getElementById("cartList").nextElementSibling;//.nextElementSibling表示下一个同辈元素 mySwiper.navigation.$prevEl.addClass('hide');
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); var ckAll = document.getElementById('ckAll');
document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);//.toFixed(2)表示四舍五入，取2位小数点 var cks = document.getElementsByName('ck');
total(); 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 () {
// /*全选按钮状态显示判断*/
// $("#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 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);
}
</script> }
</html> // // 输入数量的最大值
// 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>