abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>購(gòu)物車</title> <link rel="icon" type="image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>購(gòu)物車</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">我的購(gòu)物車</h2>
<span>溫馨提示：產(chǎn)品是否購(gòu)買成功，以最終下單為準(zhǔn)哦，請(qǐng)盡快結(jié)算</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="">個(gè)人中心</a></li>
<li><a href="">評(píng)價(jià)曬單</a></li>
<li><a href="">我的喜歡</a></li>
<li><a href="">小米賬單</a></li>
<li><a href="">對(duì)出登錄</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">單價(jià)</span>
<span class="fourth">數(shù)量</span>
<span class="fiveth">小計(jì)</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 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 64G小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 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 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 64G小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 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 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 64G小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 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">繼續(xù)購(gòu)物</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">去結(jié)算</div>
<div class="totalPrice fr">合計(jì):<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>預(yù)約維修服務(wù)</a><span></span>
<a href="#"><i class="fa fa-rotate-right"></i>7天無(wú)理由退貨</a><span></span>
<a href="#"><i class="fa fa-refresh"></i>15天免費(fèi)換貨</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余建售后網(wǎng)點(diǎn)</a>
</div>
<div class="footer_li_2 clearFix">
<dl>
<dt>幫助中心</dt>
<dd><a href="">賬戶管理</a></dd>
<dd><a href="">購(gòu)物指南</a></dd>
<dd><a href="">訂單操作</a></dd>
</dl>
<dl>
<dt>服務(wù)支持</dt>
<dd><a href="">售后服務(wù)</a></dd>
<dd><a href="">自助服務(wù)</a></dd>
<dd><a href="">相關(guān)下載</a></dd>
</dl>
<dl>
<dt>線下門店</dt>
<dd><a href="">小米之家</a></dd>
<dd><a href="">服務(wù)網(wǎng)點(diǎn)</a></dd>
<dd><a href="">授權(quán)體驗(yàn)店</a></dd>
</dl>
<dl>
<dt>關(guān)于小米</dt>
<dd><a href="">了解小米</a></dd>
<dd><a href="">加入小米</a></dd>
<dd><a href="">投資者關(guān)系</a></dd>
</dl>
<dl>
<dt>關(guān)注我們</dt>
<dd><a href="">新浪微博</a></dd>
<dd><a href="">官方微信</a></dd>
<dd><a href="">聯(lián)系我們</a></dd>
</dl>
<dl>
<dt>特色服務(wù)</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>(僅收市話費(fèi))</p>
<button><span class="fa fa-commenting"></span>聯(lián)系客服</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="#">政企服務(wù)</a><span></span></li>
<li><a href="#">小米天貓店</a><span></span></li>
<li><a href="#">隱私政策</a><span></span></li>
<li><a href="#">商城用戶協(xié)議</a><span></span></li>
<li><a href="#">賬號(hào)協(xié)議</a><span></span></li>
<li><a href="#">問(wèn)題反饋</a><span></span></li>
<li><a href="#">廉政舉報(bào)</a><span></span></li>
<li><a href="#">誠(chéng)信合規(guī)</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號(hào)</span><a>京ICP備10046444號(hào)</a><a>京網(wǎng)文[2017]1530-131號(hào) </a>
</div>
<div class="footer_bottom_ul_2">
<a href="#">（京）網(wǎng)械平臺(tái)備字（2018）第00005號(hào)</a><a>互聯(lián)網(wǎng)藥品信息服務(wù)資格證 (京) -非經(jīng)營(yíng)性-2014-0090</a><a>營(yíng)業(yè)執(zhí)照</a><a>醫(yī)療器械公告</a>
</div>
<div class="footer_bottom_ul_2">
<a href="#">增值電信業(yè)務(wù)許可證</a><span> 網(wǎng)絡(luò)食品經(jīng)營(yíng)備案（京）【2018】WLSPJYBAHF-12</span><a>食品經(jīng)營(yíng)許可證 </a>
</div>
<div class="footer_bottom_ul_2">
<span>違法和不良信息舉報(bào)電話：185-0130-1238</span><a>知識(shí)產(chǎn)權(quán)侵權(quán)投訴</a><span>本網(wǎng)站所列數(shù)據(jù)，除特殊說(shuō)明，所有數(shù)據(jù)均出自我司實(shí)驗(yàn)室測(cè)試</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">探索黑科技，小米為發(fā)燒而生</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);
}
}
// 為每個(gè)元素添加checked
function plusChecked(){
clearChecked();
for(var i=0; i<$(".squre").length; i++){
var squre = $(".squre")[i].getAttribute("class");
$(".squre")[i].setAttribute("class",squre+" checked");
}
}
// 統(tǒng)計(jì)被選中的個(gè)數(shù)
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;
}
// 判斷被輸入數(shù)量為整數(shù)和計(jì)算小計(jì)
$(".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("請(qǐng)輸入大于0的整數(shù)");
$(this).val(1);
var price = $(this).parents(".goods").find(".third").attr("data-val")*1;
$(this).parents(".goods").find(".fiveth>span").text(price);
}
});
// 增加數(shù)量
$(".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();
});
// 減少數(shù)量
$(".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();
});
// 計(jì)算選中總價(jià)
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>
Correcting teacher：西門大官人Correction time：2019-05-05 10:06:40
Teacher's summary：代碼自己寫，不要拷貝老師的源碼，對(duì)自己太不負(fù)責(zé)，學(xué)不好的后果要自己承擔(dān)哦