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

增删改

master
YDD 2021-09-08 18:04:04 +08:00
parent ca2bd03888
commit b7445302ae
6 changed files with 539 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/logshoppingcar/shopcar.css
View File

@ -2,17 +2,12 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
li { li {
list-style: none; list-style: none;
} }
a { a {
text-decoration: none; text-decoration: none;
} }
section { section {
height: 1200px; height: 1200px;
background-color: #f5f5f5; background-color: #f5f5f5;
@ -98,9 +93,16 @@ section .whole .whole-1 .opt #checklist .among th:nth-child(3), section .whole .
width: 120px; 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) { section .whole .whole-1 .opt #checklist .among th:nth-child(5) {
width: 120px; 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) { 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; width: 15px;

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

@ -0,0 +1,111 @@
* {
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
css/logshoppingcar/shopcar2.min.css vendored Normal file
View File

@ -0,0 +1 @@
*{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 Normal file
View File

@ -0,0 +1,115 @@
* {
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 Normal file
View File

@ -0,0 +1,174 @@
<!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>

209
htmls/logshoppingcar/shopcar.html
View File

@ -18,11 +18,12 @@
<h2>全部商品(20)</h2> <h2>全部商品(20)</h2>
</div> </div>
<!-- 选择 --> <!-- 选择 -->
<div class="opt"> <div class="opt cartList" id="cartList">
<ul> <ul>
<li class="optall"> <li class="optall">
<table> <table>
<th> <input type="checkbox" id="checkall"> <th>
<input type="checkbox" id="checkall">
<label for="value1">全选</label> <label for="value1">全选</label>
<span>商品</span> <span>商品</span>
</th> </th>
@ -32,87 +33,46 @@
<th>操作</th> <th>操作</th>
</table> </table>
</li> </li>
</ul> <li></li>
<ul id="checklist"> <ul id="checklist">
<li class="among"> <li class="among">
<table> <table>
<th> <input type="checkbox" name="arr[]" value="1" class="box1"> <th> <li><input type="checkbox" name="arr[]" value="1" class="box1">
<label for="value1"><img src="../../img/images/1-1.png" alt=""></label> <label for="value1"><img src="../../img/images/1-1.png" alt=""></label></li>
</th> </th>
<th><span> <th><li>
竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190 竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
</span></th> </li></th>
<th>x3</th>
<th>￥1888.00</th>
<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="button" name="minus" value="-" onclick="minus(0);">
<input type="text" name="amount" value="1"> <input type="text" name="amount" value="1">
<input type="button" name="plus" value="+" onclick="plus(0);"> <input type="button" name="add" value="+" onclick="add(0);">
</th>
<th id="price0">￥564.6</th>
<th onclick="del(1)">删除</th>
</table>
</li> </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>
<th><span>
竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
</span></th>
<th>x3</th>
<th>￥1888.00</th>
<th> <th>
<input type="button" name="minus" value="-" onclick="minus(0);"> <li id="price0">￥564.6</li>
<input type="text" name="amount" value="1"> </th>
<input type="button" name="plus" value="+" onclick="plus(0);"> <th>
<li>
<p onclick="del(0);">删除</p>
</li>
</th> </th>
<th id="price0">￥564.6</th>
<th onclick="del(1)">删除</th>
</table> </table>
</li> </li>
<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>
竹迪&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">
<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>竹迪&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>
</ul>
</li> </li>
</ul> </ul>
</div> </div>
<div style="display:none;"></div>
</div> </div>
</div> </div>
@ -121,41 +81,96 @@
</body> </body>
<script type="text/javascript" src="../../js/jquery-1.9.1.js"></script> <script type="text/javascript" src="../../js/jquery-1.9.1.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function () {
/*全选按钮状态显示判断*/ //计算总额
$(".checklist").find("input[type='checkbox']").click(function () { function total() {
/*初始化选择为TURE*/ var prices = document.getElementsByName("price");
$(".checkall")[0].checked = true; var count = document.getElementsByName("amount");
/*获取未选中的*/ var sum = 0;
var nocheckedList = new Array(); for (var i = 0; i < prices.length; i++) {
$(".checklist").find('input:not(:checked)').each(function () { sum += prices[i].value * count[i].value;
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;
} }
}); document.getElementById("totalPrice").getElementsByTagName("span")[0].innerHTML = "¥" + sum.toFixed(2);
// 全选/取消
$(".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 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> </script>
</html> </html>