<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>购物车</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/nav.css">
<link rel="stylesheet" href="./css/shop_car.css">
<script src="./js/common.js"></script>
</head>
<body>
<section>
<h1>我的购物车</h1>
<form action="">
<ul class="shop_list">
<li data-index="0">
<div class="checkbox">
<input type="checkbox" class="shop_select" name="">
</div>
<img src="./img/shop/1.jpg" alt="">
<div class="msg">
<h6>宽松版T恤</h6>
<p id="price_shop_box">￥<span class="price_num price_shop">99.00</span></p>
<p class="shop_num_Box">
<a href="#" onclick="reduce_num(this)">-</a>
<span class="shop_num">1</span>
<a href="#" onclick="add_num(this)">+</a>
</p>
<p id="price_shop_one">单价￥<span class="price_num price_one">99.00</span></p>
<p><a href="#" onclick="deleteShop(this)" class="btn dangerBtn">删除</a></p>
</div>
</li>
<li data-index="1">
<div class="checkbox">
<input type="checkbox" class="shop_select" name="">
</div>
<img src="./img/shop/2.jpg" alt="">
<div class="msg">
<h6>休闲版印花棉质T恤</h6>
<p id="price_shop_box">￥<span class="price_num price_shop">129.00</span></p>
<p class="shop_num_Box">
<a href="#" onclick="reduce_num(this)">-</a>
<span class="shop_num">1</span>
<a href="#" onclick="add_num(this)">+</a>
</p>
<p id="price_shop_one">单价￥<span class="price_num price_one">129.00</span></p>
<p><a href="#" onclick="deleteShop(this)" class="btn dangerBtn">删除</a></p>
</div>
</li>
<li data-index="2">
<div class="checkbox">
<input type="checkbox" class="shop_select" name="">
</div>
<img src="./img/shop/3.jpg" alt="">
<div class="msg">
<h6>运动短裤</h6>
<p id="price_shop_box">￥<span class="price_num price_shop">129.00</span></p>
<p class="shop_num_Box">
<a href="#" onclick="reduce_num(this)">-</a>
<span class="shop_num">1</span>
<a href="#" onclick="add_num(this)">+</a>
</p>
<p id="price_shop_one">单价￥<span class="price_num price_one">129.00</span></p>
<p><a href="#" onclick="deleteShop(this)" class="btn dangerBtn">删除</a></p>
</div>
</li>
<li data-index="3">
<div class="checkbox">
<input type="checkbox" class="shop_select" name="">
</div>
<img src="./img/shop/4.jpg" alt="">
<div class="msg">
<h6>休闲版型府绸衬衫</h6>
<p id="price_shop_box">￥<span class="price_num price_shop">199.00</span></p>
<p class="shop_num_Box">
<a href="#" onclick="reduce_num(this)">-</a>
<span class="shop_num">1</span>
<a href="#" onclick="add_num(this)">+</a>
</p>
<p id="price_shop_one">单价￥<span class="price_num price_one">199.00</span></p>
<p><a href="#" onclick="deleteShop(this)" class="btn dangerBtn">删除</a></p>
</div>
</li>
</ul>
<div class="tjBox">
<span style="margin-right: 15px;">
<input type="checkbox" id="checkboxAll" onclick="selectAll()">
<span style="margin-left: 5px;">全选</span>
</span>
<span>订单总金额￥</span>
<span id="price_all" class="price_num">100.0</span>
<a class="btn" href="./order.html">提交订单</a>
<!-- <input type="submit" class="btn" value="提交订单"> -->
</div>
</form>
<footer>
<div class="footer-container">
<div class="contact-info">
<p>公司名称：易购商城</p>
<p>联系电话：123-4567890</p>
<p>电子邮箱：info@yigou.com</p>
<p>公司地址：XXX市XXX区XXX街道XXX号</p>
</div>
<div class="about-us">
<h4>关于我们：</h4>
<p>易购商城是一家致力于为广大用户提供高品质商品和优质服务的在线购物平台。我们汇集了各类商品，包括服装、家具、电子产品、食品等，以满足您的各种购物需求。同时，我们也积极倡导环保和可持续消费，努力为社会和环境做出贡献。</p>
</div>
<div class="shopping-guide">
<h4>购物指南：</h4>
<ol>
<li>如何下单：在商品页面选择心仪的商品，点击“加入购物车”后，进入购物车页面，填写相关信息并选择支付方式即可完成订单。</li>
<li>付款方式：我们支持多种付款方式，包括信用卡、支付宝、微信支付等。选择适合您的付款方式进行支付即可。</li>
<li>配送方式：我们与可靠的物流伙伴合作，确保商品能够安全、准时送达。我们提供国内及国际配送服务，快递费用会根据目的地和重量计算。</li>
<li>售后服务：如果您对商品有任何问题或需要退换货，请在收到商品后的7天内与我们联系。我们将尽力解决您的问题并提供满意的售后服务。</li>
</ol>
</div>
<div class="service-commitment">
<h4>服务承诺：</h4>
<ol>
<li>真实商品：我们保证所售商品均为正品，并尽量提供详细的商品信息和真实的图片，以便您做出准确的选择。</li>
<li>安全购物：我们致力于保护您的个人信息安全，采取了严格的数据加密和隐私保护措施，确保您的购物过程安全可靠。</li>
<li>优质客服：我们提供专业的客服团队，随时为您解答疑问和处理问题。如有任何疑问或建议，请随时联系我们。</li>
</ol>
</div>
<div class="friend-links">
<h4>友情链接：</h4>
<ul>
<li><a href="#">XXX品牌官网</a></li>
<li><a href="#">XXX论坛</a></li>
<li><a href="#">XXX媒体中心</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>版权所有 © 2023 易购商城。保留所有权利。</p>
</div>
</footer>
</section>
<script src="./js/nav.js"></script>
<script src="./js/shop_car.js"></script>
<script type="text/javascript">
onload = ()=>{
getPriceShop()
for (var i = 0; i < selectList.length; i++) {
selectList[i].onclick = ()=>{select()}
}
set_nav_titye("购物车")
}
function deleteShop(self){
let index = getIndex(self);
let checkboxList = document.getElementsByClassName("checkbox");
checkboxList[index].parentNode.remove()
sort()
}
function sort(){
let checkboxList = document.getElementsByClassName("checkbox");
for (var i = 0; i < checkboxList.length; i++) {
checkboxList[i].parentNode.setAttribute("data-index",i)
}
}
</script>
</body>
</html>
原生HTML+CSS+ JS服装商城前台
需积分: 5 179 浏览量
2023-06-27
00:11:28
上传
评论 2
收藏 465KB ZIP 举报
原生HTML+CSS+ JS服装商城前台.zip （47个子文件） 
shop_now.html 6KB shop_car.html 7KB
js 
login_form.js 1KB common.js 313B nav.js 3KB index.js 1009B shop_car.js 2KB shop_show.html 4KB nav.html 3KB img images 
offline.jpg 25KB wechat.jpg 8KB alipay.jpg 31KB icon 
to-big.png 4KB down.png 2KB juhao.png 3KB menu.png 6KB dian.png 2KB shop-car.png 3KB setting.png 6KB delete.png 9KB shop 1-3.jpg 42KB 2.jpg 18KB 6 (2).jpeg 22KB 6 (5).jpeg 22KB 1.jpg 11KB 6 (1).jpeg 22KB 1-4.jpg 46KB 6 (3).jpeg 28KB 1-1.jpg 36KB 6 (6).jpeg 18KB 3.jpg 15KB 6 (4).jpeg 22KB 1-2.jpg 47KB 4.jpg 16KB css shop_index.css 963B shop_car.css 2KB common.css 3KB shop_order.css 526B nav.css 3KB shop_show.css 891B login_form.css 648B hot_now.css 912B index.html 1KB user_register.html 2KB user_login.html 1KB order.html 2KB shop_hot.html 6KB资源评论
超级小的大杯柠檬水
- 粉丝: 670
- 资源: 27
最新资源
- 信呼OA系统2.1.7版源码
- 3122080306 邹子轩 实验报告二.docx
- 基于STM32 NUCLEO板设计彩色LED照明灯（纯cubeMX开发）(大赛作品，文档完整，可直接运行)
- 发那科工业机器人保养大全
- Sphere.h
- REMD固有时间尺度分解信号分量可视化（Matlab完整源码和数据）
- 嵌入式系统双单片机STC89C52+STC15W104多功能学习板电路图可扩展 适用于单片机初学者和教学
- 基于STM32蓝牙控制小车系统设计（硬件+源代码+论文）大赛作品
- XILINXFPGA源码基于Spartan3火龙刀系列FPGA开发板VGA测试例程
- Java聊天室的设计与实现【尚学堂·百战程序员】
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
