购物车购物车购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="icon" type="image/x-icon" href="static/images/footlogo.png">
<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/css/cart.css">
<script src="static/js/jquery-3.3.1.min.js"></script>
<style>
*{margin:0;padding:0;}
body{background:#f5f5f5;}
li{list-style:none;}
a{text-decoration:none;color:#ccc;cursor:pointer;}
.clearFix:after{clear:both;height:0;display:block;visibility:hidden;content:"";}
.fl{float:left;}
.fr{float:right;}
.header{width:100%;height:100px;background:white;border-bottom:3px solid #ff6700;}
.header>.header_content{width:1226px;height:100%;margin:0 auto;line-height:100px;}
.header>.header_content>img{margin-top:25px;margin-right:50px;float:left;}
.header>.header_content>span{color:#666;font-size:12px;margin-left:20px;line-height:110px;}
.header_right{color:#666;font-size:12px;cursor:pointer;}
.header_right .my_right{margin:0 20px 0 10px;}
.header_right .my:hover{color:#ff6700;}
.my{position:relative;}
.my>ul{position:absolute;top:30px;left:-30px;width:120px;background:white;box-shadow:0 0 3px rgba(0,0,0,0.1);padding:10px 0;display:none;}
.header_right .my:hover>ul{display:block;}
.my>ul>li{width:100%;height:40px;text-align:center;position:relative;}
.my>ul>li>a{position:absolute;top:-30px;left:30px;color:#333;}
.my>ul>li:hover{background:#f5f5f5;}
.my>ul>li:hover a{color:#ff6700;}
.content{width:1226px;margin:50px auto 0;color:#333;font-size:14px;}
.tab{width:1226px;height:60px;margin:50px auto 0;background:white;line-height:60px;border-bottom:1px solid #eee;}
.tab>div{display:inline-block;}
.first{margin-left:50px;width:200px;float:left;}
.second{width:350px;float:left;}
.third{width:150px;float:left;}
.fourth{width:190px;text-align:center;float:left;}
.fiveth{width:100px;margin-left:90px;float:left;}
.sixth{width:70px;text-align:center;}
.totalSqure{margin-right:10px;}
.goods{width:100%;height:100px;background:white;line-height:100px;border-bottom:1px solid #eee;}
.goods .first{width:50px;}
.goods .second .shoppingName{width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.goods .fourth .num{width:160px;height:44px;margin:25px auto 0;border:1px solid #ccc;}
.goods .fourth .num .reduce,.plus{width:44px;height:44px;line-height:44px;font-size:18px;cursor:pointer;}
.goods .fourth .num .reduce:hover{background:#f5f5f5;}
.goods .fourth .num .plus:hover{background:#f5f5f5;}
.number{width:72px;height:44px;border:none;outline:none;text-align:center;font-size:16px;line-height:44px;}
.goods .fiveth{color:#ff6700;}
.goods .sixth{cursor:pointer;}
.goods .sixth:hover{color:#ff6700;}
.total{width:1226px;height:60px;background:white;line-height:60px;margin-top:50px;margin-bottom:100px;}
.continue{width:120px;height:20px;border-right:1px solid #eee;margin-top:20px;text-align:center;line-height:20px;}
.btn{width:200px;height:60px;background:#ff6700;text-align:center;color:white;font-size:24px;}
.totalPrice{color:#ff6700;margin-right:100px;}
/*底部*/
.footer_top{width:100%;margin:0 auto;background:white;}
/*first*/
.footer_ul{width:1226px;height:100%;margin:0 auto;}
.footer_li{height:80px;line-height:80px;margin:0 auto;text-align:center;border-bottom:1px solid #e0e0e0;}
.footer_li a{font-size:16px;color:#616161;}
.footer_li a i{font-size:20px;color:#616161;margin-right:10px;}
.footer_li span{border-left:1px solid #e0e0e0;margin:0 56px;}
/*second*/
.footer_li_2{padding:40px 0;}
.footer_li_2 dl{float:left;margin-right:103px;}
.footer_li_2 dt{font-size:14px;line-height:14px;color:#424242;margin-bottom:26px;}
.footer_li_2 dd{margin-bottom:10px;}
.footer_li_2 dd a{font-size:12px;color:#757575;}
.footer_li_2 dd a:hover{color:#ff6700;}
.footer_li_2 .connect{width:263px;float:left;border-left:1px solid #e0e0e0;text-align:center;}
.telephone{color:#ff6700;font-size:22px;line-height:22px;margin-bottom:5px;}
.time{color:#616161;font-size:12px;}
.connect button{width:118px;height:28px;font-size:12px;line-height:28px;border:1px solid #ff6700;background:white;margin-top:20px;color:#ff6700;}
.connect button:hover{background:#ff6700;color:white;}
.connect button span{margin-right:5px;}
.footer_bottom{width:1226px;margin:0 auto;padding:40px 0;}
.footer_bottom_img{padding-right:10px;float:left;}
.footer_bottom_ul{float:left;}
.footer_bottom_ul_1 li{float:left;}
.footer_bottom_ul_1 li a{color:#757575;font-size:12px;}
.footer_bottom_ul_1 li a:hover{color:#ff6700;}
.footer_bottom_ul_1 li span{border-right:1px solid #757575;margin:0 8px;display:inline-block;height:12px;position:relative;top:2px;}
.footer_bottom_ul_2 a,.footer_bottom_ul_2 span{font-size:12px;color:#b0b0b0;margin-right:5px;}
.footer_bottom_ul_2 a:hover{color:#ff6700;}
.footer_bottom_logo img{width:83px;margin-top:5px;}
.bestBottom{width:1226px;font-size:20px;margin:0 auto;position:relative;top:-20px;text-align:center;font-family:楷体;color:#ccc;}
.checked{color:#ff6700;}
</style>
</head>
<body>
<div class="header">
<div class="header_content">
<img src="static/images/footlogo.png">
<h2 class="fl">我的购物车</h2>
<span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
<div class="header_right fr">
<span class="my">
<span class="my_left">我是某某</span>
<span class="my_right fa fa-angle-down"></span>
<ul>
<li><a href="">个人中心</a></li>
<li><a href="">评价晒单</a></li>
<li><a href="">我的喜欢</a></li>
<li><a href="">小米账单</a></li>
<li><a href="">对出登录</a></li>
</ul>
</span>
<span class="ordering">我的订单</span>
</div>
</div>
</div>
<div class="content">
<div class="tab">
<span class="first"><span class="totalSqure fa fa-square-o"></span>全选</span>
<span class="second">商品名称</span>
<span class="third">单价</span>
<span class="fourth">数量</span>
<span class="fiveth">小计</span>
<span class="sixth">操作</span>
</div>
<div class="goods">
<div class="first"><span class="squre fa fa-square-o"></span></div>
<div class="conImg fl" style="margin:20px 90px 0 0;height:60px;"><img src="static/images/phone/phone1.png" width="60"></div>
<div class="second"><div class="shoppingName">小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64G小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64G</div></div>
<div class="third" data-val="3199">3199元</div>
<div class="fourth"><div class="num"><div class="reduce fl">-</div><input class="number fl" type="text" value="1"><div class="plus fl">+</div></div></div>
<div class="fiveth"><span>3199</span>元</div>
<div class="sixth fa fa-times"></div>
</div>
<div class="goods">
<div class="first"><span class="squre fa fa-square-o"></span></div>
<div class="conImg fl" style="margin:20px 90px 0 0;height:60px;"><img src="static/images/phone/phone1.png" width="60"></div>
<div class="second"><div class="shoppingName">小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64G小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64G</div></div>
<div class="third" data-val="3199">3199元</div>
<div class="fourth"><div class="num"><div class="reduce fl">-</div><input class="number fl" type="text" value="1"><div class="plus fl">+</div></div></div>
<div class="fiveth"><span>3199</span>元</div>
<div class="sixth fa fa-times"></div>
</div>
<div class="goods">
<div class="first"><span class="squre fa fa-square-o"></span></div>
<div class="conImg fl" style="margin:20px 90px 0 0;height:60px;"><img src="static/images/phone/phone1.png" width="60"></div>
<div class="second"><div class="shoppingName">小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64G小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64G</div></div>
<div class="third" data-val="3199">3199元</div>
<div class="fourth"><div class="num"><div class="reduce fl">-</div><input class="number fl" type="text" value="1"><div class="plus fl">+</div></div></div>
<div class="fiveth"><span>3199</span>元</div>
<div class="sixth fa fa-times"></div>
</div>
<div class="total">
<div class="continue fl">继续购物</div>
<div class="totalNum fl" style="margin-left:20px;">共 <span style="color:#ff6700;">3</span> 件商品，已选择 <span class="chosedNum" style="color:#ff6700;">0</span> 件</div>
<div class="btn fr">去结算</div>
<div class="totalPrice fr">合计:<span style="font-size:24px;">0</span>元</div>
</div>
</div>
<!--底部-->
<div class="footers">
<div class="footer_top">
<div class="footer_ul">
<div class="footer_li">
<a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>
<a href="#"><i class="fa fa-rotate-right"></i>7天无理由退货</a><span></span>
<a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>
<a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span>
<a href="#"><i class="fa fa-map-marker"></i>520余建售后网点</a>
</div>
<div class="footer_li_2 clearFix">
<dl>
<dt>帮助中心</dt>
<dd><a href="">账户管理</a></dd>
<dd><a href="">购物指南</a></dd>
<dd><a href="">订单操作</a></dd>
</dl>
<dl>
<dt>服务支持</dt>
<dd><a href="">售后服务</a></dd>
<dd><a href="">自助服务</a></dd>
<dd><a href="">相关下载</a></dd>
</dl>
<dl>
<dt>线下门店</dt>
<dd><a href="">小米之家</a></dd>
<dd><a href="">服务网点</a></dd>
<dd><a href="">授权体验店</a></dd>
</dl>
<dl>
<dt>关于小米</dt>
<dd><a href="">了解小米</a></dd>
<dd><a href="">加入小米</a></dd>
<dd><a href="">投资者关系</a></dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd><a href="">新浪微博</a></dd>
<dd><a href="">官方微信</a></dd>
<dd><a href="">联系我们</a></dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd><a href="">F码通道</a></dd>
<dd><a href="">礼物码</a></dd>
<dd><a href="">防伪查询</a></dd>
</dl>
<div class="connect">
<p class="telephone">400-100-5675</p>
<p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p>
<button><span class="fa fa-commenting"></span>联系客服</button>
</div>
</div>
</div>
</div>
<div class="footer_bottom clearFix">
<img class="footer_bottom_img" src="static/images/footlogo.png">
<div class="footer_bottom_ul clearFix">
<ul class="footer_bottom_ul_1 clearFix">
<li><a href="#">小米商城</a><span></span></li>
<li><a href="#">MIUI</a><span></span></li>
<li><a href="#">米家</a><span></span></li>
<li><a href="#">米聊</a><span></span></li>
<li><a href="#">多看</a><span></span></li>
<li><a href="#">游戏</a><span></span></li>
<li><a href="#">路由器</a><span></span></li>
<li><a href="#">米粉卡</a><span></span></li>
<li><a href="#">政企服务</a><span></span></li>
<li><a href="#">小米天猫店</a><span></span></li>
<li><a href="#">隐私政策</a><span></span></li>
<li><a href="#">商城用户协议</a><span></span></li>
<li><a href="#">账号协议</a><span></span></li>
<li><a href="#">问题反馈</a><span></span></li>
<li><a href="#">廉政举报</a><span></span></li>
<li><a href="#">诚信合规</a><span></span></li>
<li><a href="#">Select Region</a></li>
</ul>
<div class="footer_bottom_ul_2">
<span>©</span><a href="#">mi.com</a><span>京ICP证110507号</span><a>京ICP备10046444号</a><a>京网文[2017]1530-131号 </a>
</div>
<div class="footer_bottom_ul_2">
<a href="#">（京）网械平台备字（2018）第00005号</a><a>互联网药品信息服务资格证 (京) -非经营性-2014-0090</a><a>营业执照</a><a>医疗器械公告</a>
</div>
<div class="footer_bottom_ul_2">
<a href="#">增值电信业务许可证</a><span> 网络食品经营备案（京）【2018】WLSPJYBAHF-12</span><a>食品经营许可证 </a>
</div>
<div class="footer_bottom_ul_2">
<span>违法和不良信息举报电话：185-0130-1238</span><a>知识产权侵权投诉</a><span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>
</div>
<div class="footer_bottom_logo">
<img src="static/images/footericon1.png">
<img src="static/images/footericon2.png">
<img src="static/images/footericon3.png">
<img src="static/images/footericon4.png">
<img src="static/images/footericon5.png">
</div>
</div>
</div>
<div class="bestBottom">探索黑科技，小米为发烧而生</div>
</div>
<script>
$(function(){
// 单选和全选
$(".squre").click(function(){
var squre = $(this).attr("class");
if(squre.indexOf("checked")>0){
var setSqure = squre.replace("checked","");
$(this).attr("class",setSqure);
}else{
$(this).attr("class",squre+" checked");
}
var num = chosedNum();
var len = $(".squre").length;
var totalSqure = $(".totalSqure").attr("class");
if(num == len){
$(".totalSqure").attr("class",totalSqure+" checked");
}else{
var setTotalSqure = totalSqure.replace("checked","");
$(".totalSqure").attr("class",setTotalSqure);
}
$(".chosedNum").text(num);
totalPrice1();
})
// 全选
$(".totalSqure").click(function(){
var totalSqure = $(this).attr("class");
if(totalSqure.indexOf("checked")>0){
var setSqure = totalSqure.replace("checked","");
$(this).attr("class",setSqure);
clearChecked()
}else{
$(this).attr("class",totalSqure+" checked");
plusChecked();
}
$(".chosedNum").text(chosedNum());
totalPrice1();
});
// 清除所有checked
function clearChecked(){
for(var i=0; i<$(".squre").length; i++){
var squre = $(".squre")[i].getAttribute("class");
var setSqure = squre.replace("checked","");
$(".squre")[i].setAttribute("class",setSqure);
}
}
// 为每个元素添加checked
function plusChecked(){
clearChecked();
for(var i=0; i<$(".squre").length; i++){
var squre = $(".squre")[i].getAttribute("class");
$(".squre")[i].setAttribute("class",squre+" checked");
}
}
// 统计被选中的个数
function chosedNum(){
var num = 0;
var len = $(".squre").length;
for(var i=0; i<len; i++){
if($(".squre")[i].className.indexOf("checked")>0){
num++;
}
}
return num;
}
// 判断被输入数量为整数和计算小计
$(".number").blur(function(){
var num = $(this).val()*1;
if(typeof num === "number" && num%1 === 0 && num > 0){
var price = $(this).parents(".goods").find(".third").attr("data-val")*1;
var totalPrice = price*num;
$(this).parents(".goods").find(".fiveth>span").text(totalPrice);
}else{
alert("请输入大于0的整数");
$(this).val(1);
var price = $(this).parents(".goods").find(".third").attr("data-val")*1;
$(this).parents(".goods").find(".fiveth>span").text(price);
}
});
// 增加数量
$(".plus").click(function(){
var num = $(this).parents(".goods").find(".number").val()*1;
num++;
$(this).parents(".goods").find(".number").val(num)
var price = $(this).parents(".goods").find(".third").attr("data-val")*1;
var totalPrice = price*num;
$(this).parents(".goods").find(".fiveth>span").text(totalPrice);
totalPrice1();
});
// 减少数量
$(".reduce").click(function(){
var num = $(this).parents(".goods").find(".number").val()*1;
num--;
if(num > 0){
$(this).parents(".goods").find(".number").val(num)
var price = $(this).parents(".goods").find(".third").attr("data-val")*1;
var totalPrice = price*num;
$(this).parents(".goods").find(".fiveth>span").text(totalPrice);
}
totalPrice1();
});
$(".sixth").click(function(){
$(this).parents(".goods").remove();
totalPrice1();
});
// 计算选中总价
function totalPrice1(){
var totalPrice1=0;
var squre1 = $(".squre");
for(var i=0; i<squre1.length; i++){
if(squre1[i].getAttribute("class").indexOf("checked") > 0){
totalPrice1 += $(".fiveth>span")[i].innerText*1;
}
}
$(".totalPrice>span").text(totalPrice1);
}
})
</script>
</body>
</html>