322 lines
13 KiB
HTML
322 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head lang="en">
|
|
<meta charset="UTF-8">
|
|
<title>购物车</title>
|
|
<link rel="stylesheet" href="../../css/swiper-bundle.min.css">
|
|
<link rel="stylesheet" type="text/css" href="../../css/logshoppingcar/login_cart.css"/>
|
|
<script src="../../js/swiper-bundle.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="../../css/foot.min.css" />
|
|
<link rel="stylesheet" href="../../css/centerHead.css">
|
|
<script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="../../js/login_cart/login_cart.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>
|
|
<!-- 头部导航 -->
|
|
<header class="ty_herader">
|
|
<img src="../../img/grzx/topimg.jpg" title="图1" alt="图片已缺失">
|
|
<nav class="ty_w ty_w1220 ty_ds">
|
|
<img src="../../img/logo.png" title="图2" alt="图片已缺失">
|
|
<ul class="ty_listnav">
|
|
|
|
<li> 123</li>
|
|
<li><span class="ty_di"></span><a target="_parent" href="../../index.html">网站首页</a></li>
|
|
<li><span class="ty_di"></span><a target="_parent" href="../aboutUs/aboutUs.html">关于我们</a></li>
|
|
|
|
<li><span class="ty_di"></span><a target="_parent" class="ty_gr" href="../logshoppingcar/shopcar.html"><img class="ty_topicon" title="图3" src="../../img/sy-scart.png" alt="图片已缺失">我的购物车</a></li>
|
|
<li><span class="ty_di"></span><a target="_parent" href="../artNetwork/pointsMall.html">积分商城</a></li>
|
|
<li><span class="ty_di"></span><a target="_parent" href="../contactUs/contactUs.html">联系我们</a></li>
|
|
<li><span class="ty_di"></span><a target="_parent" href="../grzx/personalData.html" >个人中心</a></li>
|
|
<li><a target="_parent" href="../logshoppingcar/login.html">【退出】</a></li>
|
|
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<div class="zhanw"></div>
|
|
<section>
|
|
<div class="whoil padding-zy320">
|
|
<div class="whoil-1 backFF">
|
|
<div class="all">全部商品(20)</div>
|
|
<!-- 选择 -->
|
|
<table class="table-cbox" border="0" cellspacing="0">
|
|
<thead>
|
|
<tr>
|
|
<th><input type="checkbox" id="ckAll" onclick="checkAll()">全选</th>
|
|
<th>商品</th>
|
|
<th></th>
|
|
<th>单价</th>
|
|
<th>数量</th>
|
|
<th>小计</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="inline" valign="top">
|
|
<td>
|
|
<div>
|
|
<input type="checkbox" name="ck" onclick="check()">
|
|
<img src="../../img/images/1-1.png" alt="图片丢失" title="购物车图片一" />
|
|
</div>
|
|
</td>
|
|
<td><div>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画靠山书房壁画抽象艺术画 11时来运转8190</div></td>
|
|
<td><span>x3</span></td>
|
|
<td>￥188.00</td>
|
|
<td>
|
|
<div>
|
|
<div class="reduce" onclick="reduceCount(this)">-</div>
|
|
<input type="text" value="3" class="count-input">
|
|
<div class="add" onclick="addCount(this)">+</div>
|
|
</div>
|
|
</td>
|
|
<td>￥564.00</td>
|
|
<td class="delete" onclick="del(this)">删除</td>
|
|
</tr>
|
|
<tr class="inline" valign="top">
|
|
<td>
|
|
<div>
|
|
<input type="checkbox" name="ck" onclick="check()">
|
|
<img src="../../img/images/1-1.png" alt="图片丢失" title="购物车图片一" />
|
|
</div>
|
|
</td>
|
|
<td><div>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画靠山书房壁画抽象艺术画 11时来运转8190</div></td>
|
|
<td><span>x3</span></td>
|
|
<td>￥188.00</td>
|
|
<td>
|
|
<div>
|
|
<div class="reduce" onclick="reduceCount(this)">-</div>
|
|
<input type="text" value="3" class="count-input">
|
|
<div class="add" onclick="addCount(this)">+</div>
|
|
</div>
|
|
</td>
|
|
<td>￥564.00</td>
|
|
<td class="delete" onclick="del(this)">删除</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="jies-box">
|
|
<div>
|
|
<input type="checkbox" id="ckAll">
|
|
<span style="margin-left: 4px;cursor: pointer;">全选</span>
|
|
<span style="margin-left: 20px;cursor: pointer;">删除</span>
|
|
</div>
|
|
<div>
|
|
<span>合计：￥<span style="font-size: 20px;font-weight: bold;color: #CB1919;" id="allPrice">0.00</span></span>
|
|
<span id="settlementt" class="settlement" style="height: 50px;background: #CB1919;color: #FFFFFF;display: inline-block;width: 130px;text-align: center;font-size: 18px;margin-left: 10px;cursor: pointer;">结算</span>
|
|
</div>
|
|
</div>
|
|
<!-- 轮播图 -->
|
|
<div class="swiper-container">
|
|
<div class="swiper-text">推荐商品</div>
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img width="100%" alt="图片丢失" title="图片一" src="../../img/images/1.png">
|
|
<div class="font-20 m-sx16 clips1">艺术清酒--得寓(酒标作品)</div>
|
|
</div>
|
|
<div class="swiper-slide"><img width="100%" alt="图片丢失" title="图片二" src="../../img/images/2.png">
|
|
<div class="font-20 m-sx16 clips1">艺术清酒--得寓(酒标作品)</div>
|
|
</div>
|
|
<div class="swiper-slide"><img width="100%" alt="图片丢失" title="图片三" src="../../img/images/3.png">
|
|
<div class="font-20 m-sx16 clips1">艺术清酒--得寓(酒标作品)</div>
|
|
</div>
|
|
<div class="swiper-slide"><img width="100%" alt="图片丢失" title="图片四" src="../../img/images/4.png">
|
|
<div class="font-20 m-sx16 clips1">艺术清酒--得寓(酒标作品)</div>
|
|
</div>
|
|
<div class="swiper-slide"><img width="100%" alt="图片丢失" title="图片一" src="../../img/images/1.png">
|
|
<div class="font-20 m-sx16 clips1">艺术清酒--得寓(酒标作品)</div>
|
|
</div>
|
|
</div>
|
|
<!-- 分页器 -->
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
// 轮播
|
|
$(window).resize(function () {//监听窗口大小的改变
|
|
sixSwiper()
|
|
})
|
|
function sixSwiper() {
|
|
let showNum = 4
|
|
let spaceBetween = 25//图片间距
|
|
let windowWidth = $(window).width()
|
|
if (windowWidth * 1 <= 900) {
|
|
showNum = 2
|
|
spaceBetween = 10
|
|
} else if (windowWidth * 1 <= 1000) {
|
|
showNum = 3
|
|
spaceBetween = 10
|
|
} else if (windowWidth * 1 <= 1200) {
|
|
showNum = 3
|
|
} else if (windowWidth * 1 <= 1450) {
|
|
showNum = 4
|
|
spaceBetween = 10
|
|
}
|
|
let myswiper = new Swiper('.swiper-container', {
|
|
cssMode: false,//禁止鼠标滑动，切换
|
|
loop: true,
|
|
slidesPerView: showNum,//显示数量
|
|
spaceBetween: spaceBetween,//图片间距
|
|
autoplay: {
|
|
delay: 2000,
|
|
stopOnLastSlide: true,
|
|
disableOnInteraction: false,
|
|
},
|
|
// 分页器
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,//点击跳转
|
|
},
|
|
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> |