chen
/
huaxia
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
huaxia/htmls/logshoppingcar/shopcar.html

176 lines
7.1 KiB
HTML
Raw Normal View History

登录、注册
2021-09-07 01:43:08 +00:00
<!DOCTYPE html>
<html lang="en">
购物车
2021-09-07 09:48:02 +00:00
登录、注册
2021-09-07 01:43:08 +00:00
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
购物车
2021-09-07 09:48:02 +00:00
<link rel="stylesheet" href="../../css/layui.css">
<link rel="stylesheet" href="../../css/logshoppingcar/shopcar.css">
登录、注册
2021-09-07 01:43:08 +00:00
</head>
购物车
2021-09-07 09:48:02 +00:00
登录、注册
2021-09-07 01:43:08 +00:00
<body>
购物车
2021-09-07 09:48:02 +00:00
<section>
<div class="whole">
<div class="whole-1">
<div class="all">
<h2>全部商品(20)</h2>
</div>
<!-- 选择 -->
增删改
2021-09-08 10:04:04 +00:00
<div class="opt cartList" id="cartList">
购物车
2021-09-07 09:48:02 +00:00
<ul>
<li class="optall">
<table>
增删改
2021-09-08 10:04:04 +00:00
<th>
<input type="checkbox" id="checkall">
购物车
2021-09-07 09:48:02 +00:00
<label for="value1">全选</label>
<span>商品</span>
</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</table>
</li>
增删改
2021-09-08 10:04:04 +00:00
<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>
竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<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>
购物车
2021-09-07 09:48:02 +00:00
<input type="button" name="minus" value="-" onclick="minus(0);">
<input type="text" name="amount" value="1">
增删改
2021-09-08 10:04:04 +00:00
<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>
购物车
2021-09-07 09:48:02 +00:00
</table>
增删改
2021-09-08 10:04:04 +00:00
</li>
购物车
2021-09-07 09:48:02 +00:00
增删改
2021-09-08 10:04:04 +00:00
</ul>
购物车
2021-09-07 09:48:02 +00:00
</li>
增删改
2021-09-08 10:04:04 +00:00
</ul>
购物车
2021-09-07 09:48:02 +00:00
</div>
增删改
2021-09-08 10:04:04 +00:00
<div style="display:none;"></div>
登录、注册
2021-09-07 01:43:08 +00:00
</div>
</div>
购物车
2021-09-07 09:48:02 +00:00
登录、注册
2021-09-07 01:43:08 +00:00
</section>
</body>
购物车
2021-09-07 09:48:02 +00:00
<script type="text/javascript" src="../../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
增删改
2021-09-08 10:04:04 +00:00
//计算总额
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()
// });
// }
// });
// });
购物车
2021-09-07 09:48:02 +00:00
</script>
登录、注册
2021-09-07 01:43:08 +00:00
</html>