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

Merge branch 'master' of http://git.scdxtc.com/chen/huaxia

master
chen 2021-09-09 18:13:21 +08:00
parent 215dc6be1b 07fa17d60a
commit 759bd582e7
3 changed files with 471 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
css/logshoppingcar/shopcar.css
View File

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

179
css/logshoppingcar/shopcar2.css Normal file
View File

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

436
htmls/logshoppingcar/shopcar.html
View File

@ -1,161 +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"> <table>
<ul> <thead>
<li class="optall"> <tr>
<table> <th><input type="checkbox" id="ckAll" onclick="checkAll()">全选</th>
<th> <input type="checkbox" id="checkall"> <th>商品</th>
<label for="value1">全选</label> <th>单价</th>
<span>商品</span> <th>数量</th>
</th> <th>小计</th>
<th>单价</th> <th>操作</th>
<th>数量</th> </tr>
<th>小计</th> </thead>
<th>操作</th> <tbody>
</table> <tr class="inline">
</li> <td><input type="checkbox" name="ck" onclick="check()"></td>
</ul> <td><img src="../../img/images/1-1.png" alt=""><span>竹迪
<ul id="checklist"> 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画
<li class="among"> 11时来运转8190</span>
<table> <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x3</span>
<th> <input type="checkbox" name="arr[]" value="1" class="box1"> </td>
<label for="value1"><img src="../../img/images/1-1.png" alt=""></label> <td>188.00</td>
</th> <td>
<th><span> <span class="reduce" onclick="reduceCount(this)">-</span>
竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190 <input type="text" value="1" class="count-input">
</span></th> <span class="add" onclick="addCount(this)">+</span>
<th>x3</th> </td>
<th>￥1888.00</th> <td>188.00</td>
<th> <td>
<input type="button" name="minus" value="-" onclick="minus(0);"> <span class="delete" onclick="del(this)">删除</span>
<input type="text" name="amount" value="1"> </td>
<input type="button" name="plus" value="+" onclick="plus(0);"> </tr>
</th> <tr class="inline">
<th id="price0">￥564.6</th> <td><input type="checkbox" name="ck" onclick="check()"></td>
<th onclick="del(1)">删除</th> <td><img src="../../img/images/1-2.png" alt=""><span>竹迪
</table> 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画
</li> 11时来运转8190</span>
<li class="among"> <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x3</span>
<table> </td>
<th> <input type="checkbox" name="arr[]" value="2" class="box1"> <td>188.00</td>
<label for="value1"><img src="../../img/images/1-2.png" alt=""></label> <td>
</th> <span class="reduce" onclick="reduceCount(this)">-</span>
<th><span> <input type="text" value="1" class="count-input">
竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190 <span class="add" onclick="addCount(this)">+</span>
</span></th> </td>
<th>x3</th> <td>188.00</td>
<th>￥1888.00</th> <td>
<th> <span class="delete" onclick="del(this)">删除</span>
<input type="button" name="minus" value="-" onclick="minus(0);"> </td>
<input type="text" name="amount" value="1"> </tr>
<input type="button" name="plus" value="+" onclick="plus(0);"> <tr class="inline">
</th> <td><input type="checkbox" name="ck" onclick="check()"></td>
<th id="price0">￥564.6</th> <td><img src="../../img/images/1-3.png" alt=""><span>竹迪
<th onclick="del(1)">删除</th> 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画
</table> 11时来运转8190</span>
</li> <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>
<li class="among"> </tr>
<table> </tfoot>
<th> <input type="checkbox" name="arr[]" value="3" class="box1"> </table>
<label for="value1"><img src="../../img/images/1-3.png" alt=""></label>
</th>
<th><span>
竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<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"> <div class="swiper-container">
<table> <div class="swiper-text">
<th> <input type="checkbox" name="arr[]" value="4" class="box1"> 推荐商品
<label for="value1"><img src="../../img/images/1-4.png" alt=""></label></th> </div>
<th><span>竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190/span></th> <div class="swiper-wrapper">
<th>x3</th> <div class="swiper-slide"><img src="../../img/images/1.png" alt=""></div>
<th>￥1888.00</th> <div class="swiper-slide"><img src="../../img/images/2.png" alt=""></div>
<th> <div class="swiper-slide"><img src="../../img/images/3.png" alt=""></div>
<input type="button" name="minus" value="-" onclick="minus(0);"> <div class="swiper-slide"><img src="../../img/images/4.png" alt=""></div>
<input type="text" name="amount" value="1"> <div class="swiper-slide"><img src="../../img/images/1.png" alt=""></div>
<input type="button" name="plus" value="+" onclick="plus(0);"> </div>
</th> <!-- 如果需要分页器 -->
<th id="price0">￥564.6</th> <div class="swiper-pagination"></div>
<th onclick="del(1)">删除</th> <!-- 如果需要导航按钮 -->
</table> <div class="swiper-button-prev"></div>
</li> <div class="swiper-button-next"></div>
</li>
</ul>
</div> </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, // 循环模式
$(function () { slidesPerView: 5,//显示数量
/*全选按钮状态显示判断*/ spaceBetween: 25,//图片间距
$(".checklist").find("input[type='checkbox']").click(function () { autoplay: {
/*初始化选择为TURE*/ delay: 3000,
$(".checkall")[0].checked = true; stopOnLastSlide: true,
/*获取未选中的*/ disableOnInteraction: true,//是否禁止自动切换
var nocheckedList = new Array(); },
$(".checklist").find('input:not(:checked)').each(function () { // 分页器
nocheckedList.push($(this).val()); pagination: {
}); el: '.swiper-pagination',
/*状态显示*/ clickable: true,//点击跳转
if (nocheckedList.length == $(".checklist").find('input').length) { },
$(".checkall")[0].checked = false; navigation: {
$(".checkall")[0].indeterminate = false; nextEl: '.swiper-button-next',//左按钮
} else if (nocheckedList.length) { prevEl: '.swiper-button-prev',//右按钮
$(".checkall")[0].indeterminate = true; },
} else { //鼠标移入变手
$(".checkall")[0].indeterminate = false; grabCursor: true,
} })
}); // 鼠标移入轮播图范围，执行的函数
// 全选/取消 mySwiper.el.onmouseover = function () {
$(".checkall").click(function () { mySwiper.autoplay.stop();
// alert(this.checked); mySwiper.navigation.$nextEl.removeClass('hide');
if ($(this).is(':checked')) { mySwiper.navigation.$prevEl.removeClass('hide');
$(".checklist").find('input').each(function () { }
$(this).prop("checked", true); // 鼠标移出轮播图范围，执行的函数
}); mySwiper.el.onmouseout = function () {
} else { mySwiper.autoplay.start();
$(".checklist").find('input').each(function () { mySwiper.navigation.$nextEl.addClass('hide');
$(this).removeAttr("checked", false); mySwiper.navigation.$prevEl.addClass('hide');
$(this).prop("checked", false); // 根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr() }
});
}
});
});
</script>
</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>