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

修改購物車頁面加載html、css、jquery

原創(chuàng) 2019-01-30 15:56:00 275
摘要:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style.css" /> <link rel="stylesheet&q

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

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

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

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

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

<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>

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

<title>上傳錯誤的html jquery更正重新上傳部分(錯誤的將參考上傳)</title>

<style>

*{margin: 0;padding: 0;list-style: none;text-decoration: none;}

.clear{clear: both;}

body{background: #F5F5F5;}

.logo{display:inline-block;margin-top: 25px;float: left;}

.headerc{width: 100%;margin: 0 auto;border-bottom: 3px solid #FF8200;height: 100px;}

.content{width: 1226px;margin: 0 auto;}

.content-left,.title-h1,.title-h6{float: left;}

.content-left{width: 820px;float: left;}

.title-h1{font-size: 26px;font-weight: 400;color: #424242;line-height: 98px;}

.title-h6{font-size: 12px; font-weight: 400;line-height: 48px;margin-top: 32px;color: #757575;margin-left: 100px;}

.content-right{float: right;margin-top: 30px;margin-right: 30px;}

.ct-rbox1 a{font-size: 14px; line-height: 48px;color: #757575;}

.boder-onset{width: 1226px; margin: 50px auto;border: 1px solid #ccc;position: relative;}

.boder-poab{width:380px ;height: 50px;line-height: 50px;background: #F5F5F5;text-align: center;font-weight: 400;font-size: 25px;position: relative;top: -75px;left: 500px;}

.ct-rbox1{width: 120px;height: 48px;float: left;}

.my-shop{float: right;margin-left: 20px;}

.my-shop a{font-size: 14px; line-height: 48px;color: #757575;}

.ct-rbox1 a:hover{color: #FF8200;}

.ct-rbox1 i:hover{color: ;}

.sowaobox{color:#0288D1;font-weight:400;width: 100px;border: 1px solid #FF5722;text-align: center;background:#FF5722;line-height: 38px;font-size: 12px;cursor: pointer;display: none;position: relative;z-index: 999;border-radius: 5px;}

.ct-rbox1:hover .sowaobox{display: block;}

.sowaobox li:hover{background: #fff;}

/*shop商城*/

.mi-list-title div{height: 70px;line-height: 70px; font-size: 14px;}

.mi-trunt{width: 100%;background-color:#f5f5f5;overflow: hidden;}

.mi-cart{width: 1226px;margin: 0 auto;padding-top: 38px;}

.mi-cart>.mi-list{background-color: #fff;overflow: hidden;}

.mi-list div{float: left;}

.mi-cart .mi-select{width: 110px;text-align: center;}

.mi-cart .mi-select i{font-size: 13px;display:inline-block;height: 15px;width:15px;line-height: 15px;background-color:#fff;color:rgba(0,0,0,0);border:1px solid #e0e0e0;margin:0 15px 0 24px;cursor: pointer;}

.mi-cart .mi-select .rls{color: #fff;background: #FF5722;border: 1px solid #FF5722;}

.mi-cart .mi-good-img{width: 120px;cursor: pointer;}

.mi-cart .mi-good-img img{width: 60px; height: 60px;margin-top: 15px;}

/*text-overflow: ellipsis;文本超出顯示省略.....white-space: nowrap;文本內(nèi)內(nèi)容不換行*/

.mi-cart .mi-good-name{width: 380px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;cursor: pointer;font-size: 17px;color: #424242;}

.mi-cart .mi-good-price{width:75px;padding-right: 84px;text-align: right;}

.mi-cart .mi-good-num{width: 150px;text-align: center;}

.mi-good-num .num-input{width: 150px;height: 40px;padding: 0;margin-top:24px;padding-top: 1px;border: 1px solid #e0e0e0;}

.num-input button{width: 37px; height: 38px;text-align: center;line-height: 38px;color: #757575;font-size: 20px;background-color: #fff;border: none;}

.num-input button:hover{background-color: #e0e0e0}

.num-input .btn1{float: left;}

.num-input .btn2{float: right;}

.num-input .num-value{float: left;width: 72px;height: 38px;text-align: center;font-size: 16px;border: none;}

.mi-cart .mi-good-total-price{width: 120px;padding-right: 81px;text-align: right;color: #FF6A00;}

.mi-cart .mi-operation{width: 80px;padding-right: 26px;text-align: center;}

.mi-cart .mi-operation i{width: 20px;height: 20px;display:inline-block;border-radius: 10px;color:#757575;line-height: 20px;font-size: 12px;cursor:pointer;}

.mi-cart .mi-operation i:hover{background: #FF5722;color: #fff;}

/**/

.mi-list-item div{width: 86px;padding:15px 0;line-height: 86px;border-top:1px solid #e0e0e0;}

.mi-list-gogo{height: 50px;line-height: 50px;background: #fff;border-top: 20px solid #F5F5F5;}

.mi-list-gogo-left{float: left;}

.mi-list-gogo-right{float: right;}

.mi-list-gogo-right

.gogo-a a{width: 150px;display: inline-block;}

.gogo-a p{color: #ccc;font-size: 17px; display: inline-block;}

.gogo-all{font-size: 14px; color: #23262E;}

.gogo-endshop{float: left;font-size: 14px;}

.gogo-submit{width: 150px;line-height: 50px;display: inline-block;border: none;background-color: #FF6700;color: #fff;cursor: pointer;}


</style>

</head>

<body>

<

<div class="headerc">

<div class="content">

<div class="content-left">

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

<a href="#" class="logo"><img src="static/images/footlogo.png" alt="" /></a>

<h1 class="title-h1"> &nbsp;&nbsp;我的購物車</h1>

<h6 class="title-h6">溫馨提示:產(chǎn)品是否購買成功,以最終下單為準哦,請盡快結(jié)算</h6>

</div>

<div class="content-right">

<div class="ct-rbox">

<div class="ct-rbox1">

<a href="#" class="biao-onc">我是某某某iS&nbsp;&nbsp;</a>&nbsp;<i class="fa fa-angle-down fa-1x biao-onc"></i>

<ul class="sowaobox">

<li class="sowao">個人中心</li>

                            <li class="sowao">評價曬單</li>

                            <li class="sowao">我的喜歡</li>

                            <li class="sowao">小米賬戶</li>

                            <li class="sowao">退出登錄</li>

</ul>

</div>

<div class="my-shop"><a href="#">我的訂單</a></div>

</div>

</div>

</div>

</div>

<!--shop商城-->

<div class="mi-trunt">

<div class="mi-cart">

<!--第一行的box-->

<div class="mi-list mi-list-title">

<div class="mi-select mi-select-all"><i class="fa fa-check" id="check-all"></i>全選</div>

<div class="mi-good-img"></div>

<div class="mi-good-name" style="font-size:14px;">商品名稱</div>

<div class="mi-good-price">單價</div>

<div class="mi-good-num">數(shù)量</div>

<div class="mi-good-total-price">小計</div>

<div class="mi-operation">操作</div>

</div>

<div class="mi-list mi-list-item">

<div class="mi-select"><i class="fa fa-check"></i></div>

<div class="mi-good-img"><img src="static/images/phone/phone1.png"></div>

<div class="mi-good-name" style="font-size:14px;"> 小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標準版 64GB 白色 64GB</div>

<div class="mi-good-price">3199元</div>

<div class="mi-good-num">

<div class="num-input">

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

<input type="text" / value="1" class="num-value">

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

</div>

</div>

<div class="mi-good-total-price">3199元</div>

<div class="mi-operation"><i class="fa fa-times"></i></div>

</div>

<div class="mi-list mi-list-item">

<div class="mi-select"><i class="fa fa-check"></i></div>

<div class="mi-good-img"><img src="static/images/phone/phone1.png"></div>

<div class="mi-good-name" style="font-size:14px;"> 小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標準版 64GB 白色 64GB</div>

<div class="mi-good-price">3199元</div>

<div class="mi-good-num">

<div class="num-input">

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

<input type="text" / value="1" class="num-value">

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

</div>

</div>

<div class="mi-good-total-price">3199元</div>

<div class="mi-operation"><i class="fa fa-times"></i></div>

</div>

<div class="mi-list mi-list-item">

<div class="mi-select"><i class="fa fa-check"></i></div>

<div class="mi-good-img"><img src="static/images/phone/phone1.png"></div>

<div class="mi-good-name" style="font-size:14px;"> 小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標準版 64GB 白色 64GB</div>

<div class="mi-good-price">3199元</div>

<div class="mi-good-num">

<div class="num-input">

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

<input type="text" / value="1" class="num-value">

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

</div>

</div>

<div class="mi-good-total-price">3199元</div>

<div class="mi-operation"><i class="fa fa-times"></i></div>

</div>

<div class="list mi-list-gogo">

<div class="mi-list-gogo-left">

<span class="gogo-a"><a href="#" style="font-size: 14px;color: #202020;">&nbsp;&nbsp;&nbsp;&nbsp;繼續(xù)購物<p>&nbsp;&nbsp;&nbsp;&nbsp;|</p></a></span>

                      <span class="gogo-gong">共 <span class="gogo-all">0</span> 件商品,已選擇 <span class="gogo-jian">0</span> 件</span>

</div>

<div class="mi-list-gogo-right">

<div class="gogo-endshop">合計: <span class="gogo-rmb">0</span> 元</div>&nbsp;&nbsp;&nbsp;&nbsp;

                    <a href="#"><button class="gogo-submit">去結(jié)算</button></a>

</div>

</div>

</div>

</div>

<!--買購物車中商品的人還買了-->

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

<div class="boder-onset"></div>

<div class="boder-poab">買購物車中商品的人還買了</div>

<div class="contentPhone" style="width: 1226px;">

<div class="cp-sj-left"></div>

<div class="cp-sj-right" style="float: right;">

<div class="cp-sj-box">

<img class="pic-shopimg" src="static/images/buy/手機1.jpg" alt="">

<div style="width:100px;margin: 0 auto;">

<a href="#" style="position:absolute;z-index: 5;color: #aaa;">小米5X 4G+64G</a>

</div><br />

<div class="pt-div">光學(xué)變焦雙攝,拍人更美</div>

<div class="pt-div">1499元</div>

<div class="bg"></div>


</div>


<div class="cp-sj-box" style="margin-left: 11px;">

<img class="pic-shopimg" src="static/images/buy/手機2.jpg" alt="">

<h3 class="pic-shoptitle"><a href="#" >米家空氣凈化器Pro 白色 </a></h3>

<p class="pic-shopdkj">大空間,快循環(huán)</p>

<p class="picshopPrice">

<span style="color:#ff6709">1399 元</span>&nbsp;&nbsp;

<del>1499元</del>

</p>

<div class="bg"></div>

</div>

<div class="cp-sj-box" style="margin-left: 11px;">

<img class="pic-shopimg" src="static/images/buy/手機3.jpg" alt="">

<h3 class="pic-shoptitle"><a href="#" >米家空氣凈化器Pro 白色 </a></h3>

<p class="pic-shopdkj">大空間,快循環(huán)</p>

<p class="picshopPrice">

<span style="color:#ff6709">1399 元</span>&nbsp;&nbsp;

<del>1499元</del>

</p>

<div class="bg"></div>

</div>

<div class="cp-sj-box" style="margin-left: 10px;">

<img class="pic-shopimg" src="static/images/buy/手機4.jpg" alt="">

<h3 class="pic-shoptitle"><a href="#" >米家空氣凈化器Pro 白色 </a></h3>

<p class="pic-shopdkj">大空間,快循環(huán)</p>

<p class="picshopPrice">

<span style="color:#ff6709">1399 元</span>&nbsp;&nbsp;

<del>1499元</del>

</p>

<div class="bg"></div>

</div>

<div class="cp-sj-box" style="margin-top: 7px;">

<img class="pic-shopimg" src="static/images/buy/手機5.jpg" alt="">

<h3 class="pic-shoptitle"><a href="#" >米家空氣凈化器Pro 白色 </a></h3>

<p class="pic-shopdkj">大空間,快循環(huán)</p>

<p class="picshopPrice">

<span style="color:#ff6709">1399 元</span>&nbsp;&nbsp;

<del>1499元</del>

</p>

<div class="bg"></div>

</div>

<div class="cp-sj-box" style="margin-left: 11px;margin-top: 7px;">

<img class="pic-shopimg" src="static/images/buy/手機6.jpg" alt="">

<h3 class="pic-shoptitle"><a href="#" >米家空氣凈化器Pro 白色 </a></h3>

<p class="pic-shopdkj">大空間,快循環(huán)</p>

<p class="picshopPrice">

<span style="color:#ff6709">1399 元</span>&nbsp;&nbsp;

<del>1499元</del>

</p>

<div class="bg"></div>

</div>

<div class="cp-sj-box" style="margin-left: 11px; margin-top: 7px;">

<img class="pic-shopimg" src="static/images/buy/手機7.jpg" alt="">

<h3 class="pic-shoptitle"><a href="#" >米家空氣凈化器Pro 白色 </a></h3>

<p class="pic-shopdkj">大空間,快循環(huán)</p>

<p class="picshopPrice">

<span style="color:#ff6709">1399 元</span>&nbsp;&nbsp;

<del>1499元</del>

</p>

<div class="bg"></div>

</div>

<div class="cp-sj-box" style="margin-left: 10px;margin-top: 7px;">

<img class="pic-shopimg" src="static/images/buy/手機8.jpg" alt="">

<h3 class="pic-shoptitle"><a href="#">米家空氣凈化器Pro 白色 </a></h3>

<p class="pic-shopdkj">大空間,快循環(huán)</p>

<p class="picshopPrice">

<span style="color:#ff6709">1399 元</span>&nbsp;&nbsp;

<del>1499元</del>

</p>

<div class="bg"></div>

</div>

</div>

</div>

<!--footer-->

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

<div class="footers">

<div class="footer">

<div class="for-li" style="border-bottom: 1px solid #aaa;">

<a href="#"><i class="fa fa-wrench">&nbsp;預(yù)約維修服務(wù)</i><span>|</span></a>

<a href="#"><i class="fa fa-rotate-right">&nbsp;7天無理由退貨</i><span>|</span></a>

<a href="#"><i class="fa fa-refresh">&nbsp;15天免費換貨</i><span>|</span></a>

<a href="#"><i class="fa fa-gift">&nbsp;滿150元包郵</i><span>|</span></a>

<a href="#"><i class="fa fa-map-marker">&nbsp;520余家售后網(wǎng)點</i></a>

</div>

</div>

</div>

<div class="for-li-1">

<div class="for-li-a">

<dl>

<dt>幫助中心</dt>

<dd>

<a href="#">賬戶管理</a>

</dd>

<dd>

<a href="#">購物指南</a>

</dd>

<dd>

<a href="#">訂單操作</a>

</dd>

</dl>

<dl>

<dt>服務(wù)支持</dt>

<dd>

<a href="#">售后政策</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)點</a>

</dd>

<dd>

<a href="#">授權(quá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="for-conten">

<p class="suorg">Feir-520-1314</p>

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

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

</div>

</div>

</div>

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

<div class="for-end" style="height: auto;">

<div class="end-1" style="margin-right: 15px;"><img src="static/images/footlogo.png" alt="" /></div>


<div class="end-2">

<div class="endli">

<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="endli-p">

<a href="#">?mi.com</a>

京ICP證110507號

<a href="#">京ICP備10046444號</a>

<a href="#">京公網(wǎng)安備11010802020134號</a>

<a href="#">京網(wǎng)文[2014]0059-0009號</a>

</a>

<br> 違法和不良信息舉報電話:185-0130-1238,本網(wǎng)站所列數(shù)據(jù),除特殊說明,所有數(shù)據(jù)均出自我司實驗室測試

</div>

</div>

<div class="end-3">

<img src="static/images/footericon1.png" alt="" class="icon" style="margin-right: 10px;" />

<img src="static/images/footericon2.png" alt="" class="icon" style="margin-right: 10px;" />

<img src="static/images/footericon3.png" alt="" class="icon" style="margin-right: 10px;" />

<img src="static/images/footericon4.png" alt="" class="icon" style="margin-right: 10px;" />

<img src="static/images/footericon5.png" alt="" class="icon" />

</div>

<!--<div class="font">探索黑科技,小米為發(fā)燒而生! </div>-->

</div>

</body>

<script>

$(document).ready(function(){

aliyun()

$('.fa-check').mouseover(function(){

if($(this).attr('class')!='fa fa-check rls'){

$(this).css('color','#FF5722');

}

})

$('.fa-check').mouseleave(function(){

$(this).css('color','#FFF');

})

//普通選擇

$('.fa-check').click(function(){

var cla=$(this).attr('class');

if(cla!='fa fa-check rls'){

$(this).attr('class','fa fa-check rls');

}else{

$(this).attr('class','fa fa-check');

}

minghui()

aliyun()

})

//全選

$('#check-all').click(function(){

var cla=$(this).attr('class');

if(cla!='fa fa-check rls'){

$('.fa-check').attr('class','fa fa-check rls');

}else{

$('.fa-check').attr('class','fa fa-check');

}

aliyun()

})


//檢查是否全選

function minghui(){

//.mi-list-item 中的   i 下面的 class

var  msuo=$('.mi-list-item i[class*="fa-check"]').length;

var  asuo=$('.mi-list-item i[class$="rls"]').length

if(msuo!=asuo){

$('#check-all').attr('class','fa fa-check')

}else{

$('#check-all').attr('class','fa fa-check rls')

}

}



//加減按鈕    查找每個 p 元素的所有類名為 "selected" 的所有同胞元素:

//siblings('input').val() 用于匹配input框里的val屬性 

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

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

//把input框里的文本類型轉(zhuǎn)換成整數(shù)   parseInt   parseInt() 函數(shù)可解析一個字符串,并返回一個整數(shù)。

btnval=parseInt(btnval);

//清零

var curbtnval=0;//可省略  在減中不可

//   初始值等于 btnval+1 每點擊一次加一次

curbtnval=btnval+1

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

//商品的數(shù)量  和商品的單價獲取

var danjia=parseFloat($(this).parents('.mi-good-num').siblings('.mi-good-price').html())//parseFloat class下字符解析成數(shù)字  parents() 獲得當(dāng)前匹配元素集合中每個元素的祖先元素

var xiaoji=danjia*curbtnval//單價乘數(shù)量

//頁面輸出

$(this).parents('.mi-good-num').siblings('.mi-good-total-price').html(xiaoji+'元')

aliyun()

})


//減

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

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

//把input框里的文本類型轉(zhuǎn)換成整數(shù)   parseInt   parseInt() 函數(shù)可解析一個字符串,并返回一個整數(shù)。

btnval=parseInt(btnval);

//清零

var curbtnval=0;//可省略  在減中不可

//當(dāng)btnval<=1的時候 curbtnval=1  否則 curbtnval=-1

btnval<=1?curbtnval=1:curbtnval=btnval-1

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

var danjia=parseFloat($(this).parents('.mi-good-num').siblings('.mi-good-price').html())

var xiaoji=danjia*curbtnval

$(this).parents('.mi-good-num').siblings('.mi-good-total-price').html(xiaoji+'元')

aliyun()

})


//統(tǒng)計購物車

function aliyun(){

//

var item=$('.mi-list-item i[class*="fa-check"]')

var items=$('.mi-list-item i[class$="rls"]').parents('.mi-select').siblings('.mi-good-total-price')

var itprice=0

for (var i=0;i<items.length;i++) {

itprice+=parseFloat(items[i].innerHTML)

}

//修改總價

$('.gogo-rmb').html(itprice)

//修改選中數(shù)

$('.gogo-jian').html(items.length)

//修改條數(shù)

$('.gogo-all').html(item.length)

}

})

</script>

</html>


批改老師:天蓬老師批改時間:2019-01-30 15:19:57
老師總結(jié):代碼放在代碼塊中提交, 就這么困難嗎? css, 一個樣式寫一行, 難道不行嗎? 你考慮過別人看你代碼的感受嗎?

發(fā)布手記

熱門詞條