Merge branch 'master' of http://git.scdxtc.com/chen/huaxia
commit
759bd582e7
|
|
@ -1,117 +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(5) {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
@charset "UTF-8";
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
section {
|
||||
height: 1200px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
section .whoil {
|
||||
padding: 15px 50px;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 {
|
||||
margin: 20px auto;
|
||||
padding: 25px;
|
||||
/* 最外层盒子 */
|
||||
/* 图片 */
|
||||
/* 左右按钮 */
|
||||
/* 改变左右箭头、分页器的样式 */
|
||||
/* 单独修改分页器的css样式，swiper默认是10*10的span */
|
||||
/* 移动鼠标，隐藏显示左右按钮，配合js使用 */
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 .all {
|
||||
padding-bottom: 10px;
|
||||
float: left;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 .all h2 {
|
||||
font-weight: 600;
|
||||
color: #cb1919;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-bottom: #cb1919 2px solid;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table {
|
||||
width: 100%;
|
||||
border: 1;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0px 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table thead {
|
||||
width: 100%;
|
||||
background-color: #f3f3f3;
|
||||
border: 2px solid #000;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table thead th {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table thead th:nth-child(2) {
|
||||
float: left;
|
||||
}
|
||||
|
||||
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 .whoil .whoil-1 table tbody .inline td:nth-child(1) {
|
||||
width: 70px;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table tbody .inline td:nth-child(n + 2) {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table tfoot td:nth-child(1) {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table tfoot td:nth-child(5) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table tfoot td:nth-child(5) #allPrice {
|
||||
color: #cb1919;
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 table tfoot td:nth-child(6) span {
|
||||
background-color: #cb1919;
|
||||
padding: 15px 25px;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 .swiper-container {
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
section .whoil .whoil-1 .swiper-container .swiper-text {
|
||||
padding: 10px 5px;
|
||||
border-bottom: #e0e0e0 1px solid;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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,161 +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">
|
||||
<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>
|
||||
</ul>
|
||||
<ul id="checklist">
|
||||
<li class="among">
|
||||
<table>
|
||||
<th> <input type="checkbox" name="arr[]" value="1" class="box1">
|
||||
<label for="value1"><img src="../../img/images/1-1.png" alt=""></label>
|
||||
</th>
|
||||
<th><span>
|
||||
竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
|
||||
</span></th>
|
||||
<th>x3</th>
|
||||
<th>￥1888.00</th>
|
||||
<th>
|
||||
<input type="button" name="minus" value="-" onclick="minus(0);">
|
||||
<input type="text" name="amount" value="1">
|
||||
<input type="button" name="plus" value="+" onclick="plus(0);">
|
||||
</th>
|
||||
<th id="price0">￥564.6</th>
|
||||
<th onclick="del(1)">删除</th>
|
||||
</table>
|
||||
</li>
|
||||
<li class="among">
|
||||
<table>
|
||||
<th> <input type="checkbox" name="arr[]" value="2" class="box1">
|
||||
<label for="value1"><img src="../../img/images/1-2.png" alt=""></label>
|
||||
</th>
|
||||
<th><span>
|
||||
竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
|
||||
</span></th>
|
||||
<th>x3</th>
|
||||
<th>￥1888.00</th>
|
||||
<th>
|
||||
<input type="button" name="minus" value="-" onclick="minus(0);">
|
||||
<input type="text" name="amount" value="1">
|
||||
<input type="button" name="plus" value="+" onclick="plus(0);">
|
||||
</th>
|
||||
<th id="price0">￥564.6</th>
|
||||
<th onclick="del(1)">删除</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>
|
||||
|
||||
<li class="among">
|
||||
<table>
|
||||
<th> <input type="checkbox" name="arr[]" value="3" class="box1">
|
||||
<label for="value1"><img src="../../img/images/1-3.png" alt=""></label>
|
||||
</th>
|
||||
<th><span>
|
||||
竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
|
||||
</span></th>
|
||||
<th>x3</th>
|
||||
<th>￥1888.00</th>
|
||||
<th>
|
||||
<input type="button" name="minus" value="-" onclick="minus(0);">
|
||||
<input type="text" name="amount" value="1">
|
||||
<input type="button" name="plus" value="+" onclick="plus(0);">
|
||||
</th>
|
||||
<th id="price0">￥564.6</th>
|
||||
<th onclick="del(1)">删除</th>
|
||||
</table>
|
||||
</li>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<li class="among">
|
||||
<table>
|
||||
<th> <input type="checkbox" name="arr[]" value="4" class="box1">
|
||||
<label for="value1"><img src="../../img/images/1-4.png" alt=""></label></th>
|
||||
<th><span>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190/span></th>
|
||||
<th>x3</th>
|
||||
<th>￥1888.00</th>
|
||||
<th>
|
||||
<input type="button" name="minus" value="-" onclick="minus(0);">
|
||||
<input type="text" name="amount" value="1">
|
||||
<input type="button" name="plus" value="+" onclick="plus(0);">
|
||||
</th>
|
||||
<th id="price0">￥564.6</th>
|
||||
<th onclick="del(1)">删除</th>
|
||||
</table>
|
||||
</li>
|
||||
|
||||
</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>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
<script type="text/javascript" src="../../js/jquery-1.9.1.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(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>
|
||||
<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');
|
||||
}
|
||||
|
||||
</html>
|
||||
//获取元素
|
||||
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>
|
||||
Loading…
Reference in New Issue