亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

小米購(gòu)物車總結(jié)

Original 2019-06-07 16:46:41 340
abstract://cart.js$(function(){ $('.allsele').click(function(){ //判斷全選樣式 if($(this).children().hasClass('noselec')){ $(this).children().removeClass('noselec'); $(this).children().

QQ截圖20190607164151.png

//cart.js

$(function(){

$('.allsele').click(function(){

//判斷全選樣式

if($(this).children().hasClass('noselec')){

$(this).children().removeClass('noselec');

$(this).children().css('color','#ff6100');

//給子項(xiàng)加樣式

$('.seleitem').children().removeClass('cartitemselec')

$('.seleitem').children().css('color','#ff6100');

//調(diào)用 selec函數(shù),實(shí)現(xiàn)計(jì)算金額

var len=$('.seleitem').length;

selec(1,'.seleitem',len);

}else{

$(this).children().addClass('noselec');

$(this).children().css('color','');

$('.seleitem').children().addClass('cartitemselec')

$('.seleitem').children().css('color','');

var len=$('.seleitem').length;

selec(0,'.seleitem',len);

}


})

$('.seleitem').click(function(){

if($(this).children().hasClass('cartitemselec')){

$(this).children().removeClass('cartitemselec');

$(this).children().css('color','#ff6100');

selec(1,this);//調(diào)用 selec函數(shù),實(shí)現(xiàn)seleitem計(jì)算金額

//seleitem子項(xiàng)判斷是否全選

var elem=$(this).parents('.cartitem').siblings('.cartitem')

var len=elem.length;

var has=[];

for(var i=0;i<len;i++){

has[i]=elem.eq(i).find('.fa-check').hasClass('cartitemselec');

}

//inArray函數(shù)判斷fa-check是否全有cartitemselec屬性,全有代表全選,否則不能自動(dòng)全選

if($.inArray(true,has)<0){

$(this).parents('.carshop').find('.allsele').children().removeClass('noselec');

$(this).parents('.carshop').find('.allsele').children().css('color','#ff6100');

}


}else{

$(this).children().addClass('cartitemselec');

$(this).children().css('color','');

$(this).parents('.carshop').find('.allsele').children().addClass('noselec');

$(this).parents('.carshop').find('.allsele').children().css('color','');

selec(0,this);

}


})

//點(diǎn)選增加數(shù)量

$('.add').click(function(){

var num=parseInt($(this).siblings('input').val());

num+=1;

$(this).siblings('input').val(num);

subtotle(num,this);

if(!$(this).parents('.cartitem').find('.fa-check').hasClass('cartitemselec')){

console.log(999);

totle=3199+parseFloat($('.totleNum').html());

$('.totleNum').html(totle);

}

})

//點(diǎn)選減少數(shù)量

$('.reduce').click(function(){

var num=parseInt($(this).siblings('input').val());

if(num>1){

num-=1;

$(this).siblings('input').val(num);

subtotle(num,this);

if(!$(this).parents('.cartitem').find('.fa-check').hasClass('cartitemselec')){

console.log(999);

totle=parseFloat($('.totleNum').html())-3199;

$('.totleNum').html(totle);

}

}

})

//獲取每項(xiàng)金額加入到總金額

function subtotle(a,tag){

// console.log(a);

var totle=a*3199;

$(tag).parents('.cartitem').find('.amounts').html(totle+'元');

return totle;

}

//獲取總金額

function selec(a,tag,len=0){

var sprice=0;

var snum=0;

if(len>0){

$('.subamount').html(2);

for(var i=0;i<len;i++){

sprice+=parseFloat($(tag).eq(i).parents('.cartitem').find('.amounts').html());

}

}

if(len==0){

sprice=parseFloat($(tag).parents('.cartitem').find('.amounts').html());

}

var subamount=parseFloat($('.subamount').html());

var stotle=parseFloat($('.totleNum').html());

if(a==1){

subamount+=1;

$('.subamount').html(subamount+'');

$('.totleNum').html(stotle+sprice+'');

}

if(a==0){

subamount-=1;

$('.subamount').html(subamount+'');

$('.totleNum').html(stotle-sprice);

}

}

})

//cart.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>小米商城</title>

<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png">

<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="static/css/style.css">

<link rel="stylesheet" type="text/css" href="static/css/cart.css">

<script type="text/javascript" src="static/js/jq_3.3.1_mi.js"></script>

<script type="text/javascript" src="static/js/cart.js"></script>

</head>

<body>

<!-- 頭部 -->

<div class="cartheader">

<div class="cartnav">

<h2 class="fl">我的購(gòu)物車</h2>

<span class="fl">溫馨提示:產(chǎn)品是否購(gòu)買成功,以最終下單為準(zhǔn)哦,請(qǐng)盡快結(jié)算</span>

<div class="usernav fr">

<div class="fl">我是某某某&nbsp&nbsp&nbsp<i class="fa fa-angle-down fa-1x"></i></div>

<div class="fl" style="margin-left:20px">我的訂單</div>

</div>

<div class="clear"></div>

</div>


</div>

<div class="outContent" style="padding-top:40px;">

<div class="carshop">

<div class="carshoptitle">

<span class="allsele"><i class="fa fa-check noselec"></i>&nbsp&nbsp&nbsp&nbsp全選</span>

<span class="waresname">商品名稱</span>

<span class="waresprice">單價(jià)</span>

<span class="waresnum">數(shù)量</span>

<span class="amount">小計(jì)</span>

<span class="operate">操作</span>

</div>

<div class="cartitem">

<span class="seleitem"><i class="fa fa-check cartitemselec"></i></span>

<img src="static/img/phone/phone1.png">

<span class="waresname">小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 64G...</span>

<span style="margin-left:80px">3199元</span>

<span class='number'>

<button class="reduce">-</button>

<input type="text" value="1">

<button class="add">+</button>


</span>

<span class="amounts">3199元</span>

<span><i class="fa fa-times operate"></i></span>

</div>

<div class="cartitem">

<span class="seleitem"><i class="fa fa-check cartitemselec"></i></span>

<img src="static/img/phone/phone1.png">

<span class="waresname">小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 64G...</span>

<span style="margin-left:80px">3199元</span>

<span class='number'>

<button class="reduce">-</button>

<input type="text" value="1">

<button class="add">+</button>


</span>

<span class="amounts">3199元</span>

<span><i class="fa fa-times operate"></i></span>

</div>

<div class="cartitem">

<span class="seleitem"><i class="fa fa-check cartitemselec"></i></span>

<img src="static/img/phone/phone1.png">

<span class="waresname">小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 64G...</span>

<span style="margin-left:80px">3199元</span>

<span class='number'>

<button class="reduce">-</button>

<input type="text" value="1">

<button class="add">+</button>


</span>

<span class="amounts">3199元</span>

<span><i class="fa fa-times operate"></i></span>

</div>


</div>

<div class="carPrice">

<div class="contcar fl">

繼續(xù)購(gòu)物 <span style="margin:0px 20px;color:#ccc">|</span>共 <span>3</span> 件商品,已選擇 <span class="subamount">0</span> 件

</div>

<div class="overprice fr">

<span class="fl" style="color:#ff6100">合計(jì)<span class="totleNum" style="font-size:22px;margin:0 10px;">0</span>元</span>

<div class="goPrice fl">去結(jié)算</div>

</div>

</div>

<div class="content">

<div class="contitle">

<span class="conline" >

<span>買購(gòu)物車中商品的人還買了</span>

</span>

</div>

<div class="contentPhone">

<div class="contentPhone-1 fl"></div>

<div class="contentPhone-2 fl">

<div class="conItem" style="margin-right:12.7px;">

<img src="static/img/buy/手機(jī)1.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光學(xué)變焦雙攝,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div  class="conItem" style="margin-right:12.7px;">

<span class="conFlag">享八折</span>

<img src="static/img/buy/手機(jī)2.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光學(xué)變焦雙攝,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div class="conItem" style="margin-right:12.7px;">

<img src="static/img/buy/手機(jī)3.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光學(xué)變焦雙攝,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div class="conItem">

<img src="static/img/buy/手機(jī)4.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光學(xué)變焦雙攝,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div class="conItem" style="margin-right:12.7px;margin-top:12.7px;">

<img src="static/img/buy/手機(jī)5.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光學(xué)變焦雙攝,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div class="conItem" style="margin-right:12.7px;margin-top:12.7px;">

<img src="static/img/buy/手機(jī)6.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光學(xué)變焦雙攝,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div class="conItem" style="margin-right:12.7px;margin-top:12.7px;">

<img src="static/img/buy/手機(jī)7.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光學(xué)變焦雙攝,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div class="conItem" style="margin-top:12.7px;">

<img src="static/img/buy/手機(jī)8.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光學(xué)變焦雙攝,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>


</div>

</div>

<div class="clear"></div>

</div>

</div>

<!-- 底部 -->

<div class="footer">

<div class="foot">

<div class="foot-top">

<a href="#"><i class="fa fa-wrench"></i>預(yù)約維修服務(wù)</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天免費(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>

<span class="separate"></span>

<!-- <div class="separate"></div> -->

<div class="foot-middle">

<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="#">官網(wǎng)微博</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="tele">Feir-520-1314</p>

<p class="timer">周一至周日 8:00-18:00<br>僅收市話費(fèi)</p>

<button><i class="fa fa-commenting"></i><span>聯(lián)系客服</span></button>


</div>

</div>

<div class="clear"></div>

<div class="foot-bottom">

<div class="foot-bottom-left fl">

<img src="static/img/footlogo.png">

</div>

<div class="foot-bottom-middle fl" style="margin:0 8px;">

<div class="foot-bottom-middle-a">

<ul>

<li>小米商城<span></span></li>

<li>MIUI<span></span></li>

<li>米家<span></span></li>

<li>米聊<span></span></li>

<li>多看<span></span></li>

<li>游戲<span></span></li>

<li>路由器<span></span></li>

<li>米粉卡<span></span></li>

<li>政企服務(wù)<span></span></li>

<li>小米天貓店<span></span></li>

<li>隱私政策<span></span></li>

<li>問題反饋<span></span></li>

<li>Select Region</li>

</ul>

</div>

<div class="foot-bottom-middle-b">

?mi.com 京ICP證110507號(hào) 京ICP備10046444號(hào) 京公網(wǎng)安備11010802020134號(hào) 京網(wǎng)文[2014]0059-0009號(hào)違法和不良信息舉報(bào)電話:185-0130-1238,本網(wǎng)站所列數(shù)據(jù),除特殊說明,所有數(shù)據(jù)均出自我司實(shí)驗(yàn)室測(cè)試


</div>

</div>

<div class="foot-bottom-right fr">

<img src="static/img/footericon1.png">

<img src="static/img/footericon2.png">

<img src="static/img/footericon3.png">

<img src="static/img/footericon4.png">

<img src="static/img/footericon5.png">

</div>

<div class="clear"></div>

<div class="" style="line-height:15px;text-align:center;">

探索黑科技,小米為發(fā)燒而生!

</div>

</div>

</div>

</div>


</body>

</html>


Correcting teacher:查無此人Correction time:2019-06-10 09:42:04
Teacher's summary:完成的不錯(cuò)。學(xué)編程,先從模仿開始,繼續(xù)加油。

Release Notes

Popular Entries