309 lines
13 KiB
HTML
309 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head lang="en">
|
|
<meta charset="UTF-8">
|
|
<title>购物车</title>
|
|
<link rel="stylesheet" href="../../css/layui.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="whoil">
|
|
<div class="whoil-1">
|
|
<th>
|
|
<div class="all">
|
|
<h2>全部商品(20)</h2>
|
|
</div>
|
|
</th>
|
|
|
|
<!-- 选择 -->
|
|
<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="图片丢失" title="购物车图片一"><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="图片丢失" title="购物车图片二" ><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="图片丢失" title="购物车图片三"><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="图片丢失" title="购物车图片四"><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>
|
|
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
<div class="swiper-container">
|
|
<div class="swiper-text">
|
|
推荐商品
|
|
</div>
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img alt="图片丢失" title="图片一" src="../../img/images/1.png" ></div>
|
|
<div class="swiper-slide"><img alt="图片丢失" title="图片二" src="../../img/images/2.png" ></div>
|
|
<div class="swiper-slide"><img alt="图片丢失" title="图片三" src="../../img/images/3.png" ></div>
|
|
<div class="swiper-slide"><img alt="图片丢失" title="图片四" src="../../img/images/4.png" ></div>
|
|
<div class="swiper-slide"><img alt="图片丢失" title="图片一" src="../../img/images/1.png" ></div>
|
|
</div>
|
|
<!-- 如果需要分页器 -->
|
|
<div class="swiper-pagination"></div>
|
|
<!-- 如果需要导航按钮 -->
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<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');
|
|
}
|
|
|
|
//获取元素
|
|
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> |