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

357 lines
15 KiB
HTML
Raw Normal View History

登录、注册
2021-09-07 01:43:08 +00:00
<!DOCTYPE html>
购物车
2021-09-09 09:58:19 +00:00
<html>
购物车
2021-09-07 09:48:02 +00:00
购物车
2021-09-09 09:58:19 +00:00
<head lang="en">
登录、注册
2021-09-07 01:43:08 +00:00
<meta charset="UTF-8">
<title>购物车</title>
购物车
2021-09-07 09:48:02 +00:00
<link rel="stylesheet" href="../../css/layui.css">
购物车
2021-09-09 09:58:19 +00:00
<link rel="stylesheet" href="../../css/swiper-bundle.min.css">
<link rel="stylesheet" href="../../css/logshoppingcar/shopcar2.css">
跟新
2021-09-14 10:11:47 +00:00
<link rel="stylesheet" href="../../css/logshoppingcar/logRespon.css">
购物车
2021-09-09 09:58:19 +00:00
<script src="../../js/swiper-bundle.min.js"></script>
头、底部
2021-09-14 05:46:26 +00:00
<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>
登录、注册
2021-09-07 01:43:08 +00:00
</head>
头、底部
2021-09-14 05:46:26 +00:00
<style>
.foot-iframe {
margin-top: -30px;
color: rgb(255, 255, 255);
}
购物车
2021-09-07 09:48:02 +00:00
头、底部
2021-09-14 05:46:26 +00:00
#gotoTop {
float: right;
position: relative;
right: 50px;
top: -50px;
}
</style>
订单
2021-09-15 09:31:07 +00:00
登录、注册
2021-09-07 01:43:08 +00:00
<body>
订单
2021-09-15 09:31:07 +00:00
<!-- 头部导航 -->
<iframe src="../../public/center-head.html" class="ty_herader" width="100%" height="285px" frameborder="0"
scrolling="no"></iframe>
购物车
2021-09-07 09:48:02 +00:00
<section>
购物车
2021-09-09 09:58:19 +00:00
<div class="whoil">
<div class="whoil-1">
<th>
<div class="all">
<h2>全部商品(20)</h2>
</div>
</th>
购物车
2021-09-07 09:48:02 +00:00
<!-- 选择 -->
订单
2021-09-15 09:31:07 +00:00
<table style="text-align: left;">
购物车
2021-09-09 09:58:19 +00:00
<thead>
<tr>
订单
2021-09-15 09:31:07 +00:00
<th><input type="checkbox" id="ckAll" onclick="checkAll()">&nbsp;&nbsp;全选</th>
购物车
2021-09-09 09:58:19 +00:00
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="inline">
订单
2021-09-15 09:31:07 +00:00
<th><input type="checkbox" name="ck" onclick="check()"><img src="../../img/images/1-1.png"
alt="图片丢失" title="购物车图片一"></th>
<td><span>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</span>
购物车
2021-09-09 09:58:19 +00:00
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x3</span>
</td>
<td>188.00</td>
<td>
订单
2021-09-15 09:31:07 +00:00
<button class="reduce" onclick="reduceCount(this)">-</button>
<input type="text" value="3" class="count-input">
<button class="add" onclick="addCount(this)">+</button>
购物车
2021-09-09 09:58:19 +00:00
</td>
订单
2021-09-15 09:31:07 +00:00
<td>564.00</td>
购物车
2021-09-09 09:58:19 +00:00
<td>
<span class="delete" onclick="del(this)">删除</span>
</td>
</tr>
<tr class="inline">
订单
2021-09-15 09:31:07 +00:00
<th><input type="checkbox" name="ck" onclick="check()"><img src="../../img/images/1-2.png"
alt="图片丢失" title="购物车图片二"></th>
<td><span>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</span>
购物车
2021-09-09 09:58:19 +00:00
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x3</span>
</td>
<td>188.00</td>
<td>
订单
2021-09-15 09:31:07 +00:00
<button class="reduce" onclick="reduceCount(this)">-</button>
购物车
2021-09-09 09:58:19 +00:00
<input type="text" value="1" class="count-input">
订单
2021-09-15 09:31:07 +00:00
<button class="add" onclick="addCount(this)">+</button>
购物车
2021-09-09 09:58:19 +00:00
</td>
<td>188.00</td>
<td>
<span class="delete" onclick="del(this)">删除</span>
</td>
</tr>
<tr class="inline">
订单
2021-09-15 09:31:07 +00:00
<th><input type="checkbox" name="ck" onclick="check()"><img src="../../img/images/1-3.png"
alt="图片丢失" title="购物车图片三"></th>
<td><span>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</span>
购物车
2021-09-09 09:58:19 +00:00
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x3</span>
</td>
<td>188.00</td>
<td>
订单
2021-09-15 09:31:07 +00:00
<button class="reduce" onclick="reduceCount(this)">-</button>
购物车
2021-09-09 09:58:19 +00:00
<input type="text" value="1" class="count-input">
订单
2021-09-15 09:31:07 +00:00
<button class="add" onclick="addCount(this)">+</button>
购物车
2021-09-09 09:58:19 +00:00
</td>
<td>188.00</td>
<td>
<span class="delete" onclick="del(this)">删除</span>
</td>
</tr>
<tr class="inline">
订单
2021-09-15 09:31:07 +00:00
<th><input type="checkbox" name="ck" onclick="check()"><img src="../../img/images/1-4.png"
alt="图片丢失" title="购物车图片四"></th>
<td><span>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</span>
购物车
2021-09-09 09:58:19 +00:00
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x3</span>
</td>
<td>188.00</td>
<td>
订单
2021-09-15 09:31:07 +00:00
<button class="reduce" onclick="reduceCount(this)">-</button>
购物车
2021-09-09 09:58:19 +00:00
<input type="text" value="1" class="count-input">
订单
2021-09-15 09:31:07 +00:00
<button class="add" onclick="addCount(this)">+</button>
购物车
2021-09-09 09:58:19 +00:00
</td>
<td>188.00</td>
<td>
<span class="delete" onclick="del(this)">删除</span>
</td>
</tr>
</tbody>
<tfoot id="foot">
<tr>
订单
2021-09-15 09:31:07 +00:00
<th><input type="checkbox" id="ckAll" onclick="checkAll()">&nbsp;&nbsp;全选</th>
<td valgin="left"><span class="delete" onclick="del(this)">删除</span></td>
购物车
2021-09-09 09:58:19 +00:00
<td></td>
<td>总数：<span id="allCount"></span>件</td>
<td>总价：￥<span id="allPrice"></span></td>
订单
2021-09-15 09:35:24 +00:00
<td><a href="./tobepaid.html"><span id="accounts" onclick="accounts();">结算</span></a></td>
购物车
2021-09-09 09:58:19 +00:00
</tr>
</tfoot>
</table>
订单
2021-09-15 09:31:07 +00:00
<!-- 轮播图 -->
购物车
2021-09-09 09:58:19 +00:00
<div class="swiper-container">
<div class="swiper-text">
推荐商品
</div>
<div class="swiper-wrapper">
订单
2021-09-15 09:31:07 +00:00
<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>
购物车
2021-09-09 09:58:19 +00:00
</div>
订单
2021-09-15 09:31:07 +00:00
<!-- 分页器 -->
购物车
2021-09-09 09:58:19 +00:00
<div class="swiper-pagination"></div>
订单
2021-09-15 09:31:07 +00:00
<!-- 导航按钮 -->
购物车
2021-09-09 09:58:19 +00:00
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
购物车
2021-09-07 09:48:02 +00:00
</div>
登录、注册
2021-09-07 01:43:08 +00:00
</div>
</section>
购物车
2021-09-09 09:58:19 +00:00
<script>
订单
2021-09-15 09:31:07 +00:00
// 轮播
$(window).resize(function () {//监听窗口大小的改变
sixSwiper()
购物车
2021-09-09 09:58:19 +00:00
})
订单
2021-09-15 09:31:07 +00:00
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,//图片间距
购物车
2021-09-09 09:58:19 +00:00
订单
2021-09-15 09:31:07 +00:00
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()
购物车
2021-09-09 09:58:19 +00:00
//获取元素
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");
// 结算
订单
2021-09-15 09:31:07 +00:00
function accounts() {
var sum = 0;
}
function accounts() {
accounts.style.display = "block";
alert("")
accounts.innerHTML = str;
}
购物车
2021-09-09 09:58:19 +00:00
//计算总数
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();
增删改
2021-09-08 10:04:04 +00:00
}
购物车
2021-09-09 09:58:19 +00:00
//全选和反选
function checkAll() {
for (var i = 0; i < cks.length; i++) {
cks[i].checked = ckAll.checked;
}
sumPrice();
sumCount();
增删改
2021-09-08 10:04:04 +00:00
}
购物车
2021-09-09 09:58:19 +00:00
订单
2021-09-15 09:31:07 +00:00
//复选框
购物车
2021-09-09 09:58:19 +00:00
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();
增删改
2021-09-08 10:04:04 +00:00
}
购物车
2021-09-09 09:58:19 +00:00
//单行删除
function del(e) {
e.parentElement.parentElement.remove();
sumPrice();
sumCount();
}
</script>
订单
2021-09-15 09:31:07 +00:00
头、底部
2021-09-14 05:46:26 +00:00
<!-- 底部导航 -->
<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="回到顶部">
购物车
2021-09-09 09:58:19 +00:00
</body>