357 lines
15 KiB
HTML
357 lines
15 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">
|
|
<link rel="stylesheet" href="../../css/logshoppingcar/logRespon.css">
|
|
<script src="../../js/swiper-bundle.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="../../css/foot.min.css" />
|
|
<script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
|
|
</head>
|
|
<style>
|
|
.foot-iframe {
|
|
margin-top: -30px;
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
#gotoTop {
|
|
float: right;
|
|
position: relative;
|
|
right: 50px;
|
|
top: -50px;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<!-- 头部导航 -->
|
|
<iframe src="../../public/center-head.html" class="ty_herader" width="100%" height="285px" frameborder="0"
|
|
scrolling="no"></iframe>
|
|
<section>
|
|
<div class="whoil">
|
|
<div class="whoil-1">
|
|
<th>
|
|
<div class="all">
|
|
<h2>全部商品(20)</h2>
|
|
</div>
|
|
</th>
|
|
|
|
<!-- 选择 -->
|
|
<table style="text-align: left;">
|
|
<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">
|
|
<th><input type="checkbox" name="ck" onclick="check()"><img src="../../img/images/1-1.png"
|
|
alt="图片丢失" title="购物车图片一"></th>
|
|
<td><span>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</span>
|
|
<span> x3</span>
|
|
</td>
|
|
<td>188.00</td>
|
|
<td>
|
|
<button class="reduce" onclick="reduceCount(this)">-</button>
|
|
<input type="text" value="3" class="count-input">
|
|
<button class="add" onclick="addCount(this)">+</button>
|
|
</td>
|
|
<td>564.00</td>
|
|
<td>
|
|
<span class="delete" onclick="del(this)">删除</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="inline">
|
|
<th><input type="checkbox" name="ck" onclick="check()"><img src="../../img/images/1-2.png"
|
|
alt="图片丢失" title="购物车图片二"></th>
|
|
<td><span>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</span>
|
|
<span> x3</span>
|
|
</td>
|
|
<td>188.00</td>
|
|
<td>
|
|
<button class="reduce" onclick="reduceCount(this)">-</button>
|
|
<input type="text" value="1" class="count-input">
|
|
<button class="add" onclick="addCount(this)">+</button>
|
|
</td>
|
|
<td>188.00</td>
|
|
<td>
|
|
<span class="delete" onclick="del(this)">删除</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="inline">
|
|
<th><input type="checkbox" name="ck" onclick="check()"><img src="../../img/images/1-3.png"
|
|
alt="图片丢失" title="购物车图片三"></th>
|
|
<td><span>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</span>
|
|
<span> x3</span>
|
|
</td>
|
|
<td>188.00</td>
|
|
<td>
|
|
<button class="reduce" onclick="reduceCount(this)">-</button>
|
|
<input type="text" value="1" class="count-input">
|
|
<button class="add" onclick="addCount(this)">+</button>
|
|
</td>
|
|
<td>188.00</td>
|
|
<td>
|
|
<span class="delete" onclick="del(this)">删除</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="inline">
|
|
<th><input type="checkbox" name="ck" onclick="check()"><img src="../../img/images/1-4.png"
|
|
alt="图片丢失" title="购物车图片四"></th>
|
|
<td><span>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</span>
|
|
<span> x3</span>
|
|
</td>
|
|
<td>188.00</td>
|
|
<td>
|
|
<button class="reduce" onclick="reduceCount(this)">-</button>
|
|
<input type="text" value="1" class="count-input">
|
|
<button class="add" onclick="addCount(this)">+</button>
|
|
</td>
|
|
<td>188.00</td>
|
|
<td>
|
|
<span class="delete" onclick="del(this)">删除</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot id="foot">
|
|
<tr>
|
|
<th><input type="checkbox" id="ckAll" onclick="checkAll()"> 全选</th>
|
|
<td valgin="left"><span class="delete" onclick="del(this)">删除</span></td>
|
|
<td></td>
|
|
<td>总数：<span id="allCount"></span>件</td>
|
|
<td>总价：￥<span id="allPrice"></span></td>
|
|
<td><a href="./tobepaid.html"><span id="accounts" onclick="accounts();">结算</span></a></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 class="font-20 m-sx16 clips1">艺术之乐 · 百名艺术家酒标展</div>
|
|
</div>
|
|
<div class="swiper-slide"><img alt="图片丢失" title="图片二" src="../../img/images/2.png">
|
|
<div class="font-20 m-sx16 clips1">艺术之乐 · 百名艺术家酒标展</div>
|
|
</div>
|
|
<div class="swiper-slide"><img alt="图片丢失" title="图片三" src="../../img/images/3.png">
|
|
<div class="font-20 m-sx16 clips1">艺术之乐 · 百名艺术家酒标展</div>
|
|
</div>
|
|
<div class="swiper-slide"><img alt="图片丢失" title="图片四" src="../../img/images/4.png">
|
|
<div class="font-20 m-sx16 clips1">艺术之乐 · 百名艺术家酒标展</div>
|
|
</div>
|
|
<div class="swiper-slide"><img alt="图片丢失" title="图片一" src="../../img/images/1.png">
|
|
<div class="font-20 m-sx16 clips1">艺术之乐 · 百名艺术家酒标展</div>
|
|
</div>
|
|
</div>
|
|
<!-- 分页器 -->
|
|
<div class="swiper-pagination"></div>
|
|
<!-- 导航按钮 -->
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
// 轮播
|
|
$(window).resize(function () {//监听窗口大小的改变
|
|
sixSwiper()
|
|
})
|
|
function sixSwiper() {
|
|
let showNum = 4
|
|
let beforeNum = 15
|
|
let centeredSlides = true//是否显示半截
|
|
let spaceBetween = 25//图片间距
|
|
let windowWidth = $(window).width()
|
|
if (windowWidth * 1 <= 900) {
|
|
showNum = 2
|
|
beforeNum = 0
|
|
centeredSlides = false
|
|
spaceBetween = 10
|
|
} else if (windowWidth * 1 <= 1000) {
|
|
showNum = 3
|
|
beforeNum = 0
|
|
centeredSlides = false
|
|
spaceBetween = 10
|
|
} else if (windowWidth * 1 <= 1200) {
|
|
showNum = 3
|
|
beforeNum = 0
|
|
centeredSlides = false
|
|
} else if (windowWidth * 1 <= 1450) {
|
|
showNum = 4
|
|
beforeNum = 0
|
|
spaceBetween = 10
|
|
centeredSlides = true
|
|
}
|
|
let myswiper = new Swiper('.swiper-container', {
|
|
cssMode: false,//禁止鼠标滑动，切换
|
|
loop: true,
|
|
slidesPerView: showNum,//显示数量
|
|
spaceBetween: spaceBetween,//图片间距
|
|
|
|
slidesOffsetBefore: beforeNum,
|
|
autoplay: {
|
|
delay: 2000,
|
|
stopOnLastSlide: true,
|
|
disableOnInteraction: false,
|
|
},
|
|
// 分页器
|
|
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');
|
|
}
|
|
}
|
|
sixSwiper()
|
|
//获取元素
|
|
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);
|
|
|
|
}
|
|
}
|
|
|
|
//数量增加
|
|
function addCount(e) {
|
|
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() {
|
|
for (var i = 0; i < cks.length; i++) {
|
|
if (cks[i].checked == false) {
|
|
ckAll.checked = false;
|
|
sumPrice();
|
|
sumCount();
|
|
return;
|
|
}
|
|
}
|
|
ckAll.checked = true;
|
|
sumPrice();
|
|
sumCount();
|
|
}
|
|
|
|
//单行删除
|
|
function del(e) {
|
|
e.parentElement.parentElement.remove();
|
|
sumPrice();
|
|
sumCount();
|
|
}
|
|
|
|
</script>
|
|
|
|
<!-- 底部导航 -->
|
|
<iframe src="../../public/foot-tab.html" class="foot-iframe" frameborder="0" scrolling="no"
|
|
marginwidth='0'></iframe>
|
|
<!-- 回到顶部 -->
|
|
<img id="gotoTop" onclick="pageScroll()" src="../../img/public/backTop.png" alt="图片丢失" title="回到顶部">
|
|
</body> |