溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)購物車怎么，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體內(nèi)容如下
HTML結(jié)構(gòu)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/02-reset.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <!-- 簡單寫個(gè)大盒子分大三欄 --> <div class="cart"> <!-- 購物車頭部 --> <div class="cart-head clearfix"> <div class="col col-check u-l"> <input type="checkbox" id="all" class="check"> <label for="all">全選</label> </div> <div class="col col-img u-l"> </div> <div class="col col-name u-l">商品名稱</div> <div class="col col-price u-l">單價(jià)</div> <div class="col col-num u-l">數(shù)量</div> <div class="col col-sum u-l">小計(jì)</div> <div class="col col-action u-r">操作</div> </div> <!-- 購物車列表 --> <div class="cart-list"> <!-- 商品塊 --> <div class="list-item"> <div class="item-box "> <div class="col col-check u-l"> <input type="checkbox" class="check single"> </div> <div class="col col-img u-l"> <img src="./images/1.jpg" alt=""> </div> <div class="col col-name u-l">8848 移動版 4GB+64GB 千峰藍(lán)</div> <div class="col col-price u-l">8888元</div> <div class="col col-num u-l "> <div class="change-goods-num"> <a href="javascript:;" class="jianhao">-</a> <input type="text" value="1"> <a href="javascript:;" class="jiahao">+</a> </div> </div> <div class="col col-sum u-l">8888元</div> <div class="col col-action u-r">刪除</div> </div> <div class="item-box "> <div class="col col-check u-l"> <input type="checkbox" class="check single"> </div> <div class="col col-img u-l"> <img src="./images/1.jpg" alt=""> </div> <div class="col col-name u-l">8848 移動版 4GB+64GB 千峰藍(lán)</div> <div class="col col-price u-l">8888元</div> <div class="col col-num u-l "> <div class="change-goods-num"> <a href="javascript:;" class="jianhao">-</a> <input type="text " value="1"> <a href="javascript:;" class="jiahao">+</a> </div> </div> <div class="col col-sum u-l">8888元</div> <div class="col col-action u-r">刪除</div> </div> <div class="item-box "> <div class="col col-check u-l"> <input type="checkbox" class="check single"> </div> <div class="col col-img u-l"> <img src="./images/1.jpg" alt=""> </div> <div class="col col-name u-l">8848 移動版 4GB+64GB 千峰藍(lán)</div> <div class="col col-price u-l">8888元</div> <div class="col col-num u-l "> <div class="change-goods-num"> <a href="javascript:;" class="jianhao">-</a> <input type="text" value="1"> <a href="javascript:;" class="jiahao">+</a> </div> </div> <div class="col col-sum u-l">8888元</div> <div class="col col-action u-r">刪除</div> </div> <div class="item-box "> <div class="col col-check u-l"> <input type="checkbox" class="check single"> </div> <div class="col col-img u-l"> <img src="./images/1.jpg" alt=""> </div> <div class="col col-name u-l">8848 移動版 4GB+64GB 千峰藍(lán)</div> <div class="col col-price u-l">8888元</div> <div class="col col-num u-l "> <div class="change-goods-num"> <a href="javascript:;" class="jianhao">-</a> <input type="text" value="1"> <a href="javascript:;" class="jiahao">+</a> </div> </div> <div class="col col-sum u-l">8888元</div> <div class="col col-action u-r">刪除</div> </div> </div> </div> <!-- 購物車底部 --> <div class="cart-foot"> <div class="section-left u-l"> <a href="">繼續(xù)購物</a> <span>已選擇 <i id="totalNum">0</i> 件商品</span> </div> <div class="u-r settlement">去結(jié)算</div> <div class="u-r total-price">合計(jì)： <em id="totalPrice">0</em>元</div> </div> </div> <script type="text/javascript" src="./js/script.js"></script> </body> </html>
css結(jié)構(gòu)
/* 瀏覽器和標(biāo)簽都有默認(rèn)的樣式 清除默認(rèn)樣式 */
*{
margin: 0;padding: 0
}
/* 清除加粗標(biāo)簽的默認(rèn)樣式 */
b,strong{
font-weight: normal
}
/* 清除傾斜標(biāo)簽的默認(rèn)樣式 */
i,em{
font-style: normal
}
/* 清除默認(rèn)下劃線 */
a,u{
text-decoration: none
}
/* 超鏈接默認(rèn)顏色為黑色 */
a{
color: #000;
}
/* 清除列表的默認(rèn)符號樣式 */
ul,ol,li{
list-style: none
}
/* 左浮動 */
.u-l{
float: left;
}
/* 右浮動 */
.u-r{
float: right;
}
/* 清除浮動 */
.clearfix{
clear: both;
}.cart{
margin:0 auto;
width: 1200px;
}
/* 購物車頭部樣式 */
.cart-head{
height: 70px;
line-height: 70px;
}
.col{
width: 120px;
}
.col-img img{
width: 100px;
height: 100px;
}
.col-name{
width: 380px;
}
.col-price{
width: 160px;
padding-right: 18px;
}
.col-num{
width: 150px;
text-align: center;
}
.col-sum{
text-align: center;
color: #ff6700;
}
.col-active{
text-align: center;
}
/* 購物車商品樣式 */
.item-box{
overflow: hidden;
padding: 20px 0;
border-top: 1px solid #ccc;
}
.change-goods-num{
width: 148px;
height: 38px;
border: 1px solid #000;
}
.change-goods-num a{
float: left;
width: 38px;
height: 38px;
line-height: 38px;
font-size: 20px;
color: #000;
text-align: center;
}
.change-goods-num input{
float: left;
width: 72px;
height: 38px;
font-size: 18px;
line-height: 38px;
text-align: center;
border-width: 0;
}
/* 底部 */
.cart-foot{
height: 50px;
line-height: 50px;
border: 1px solid #ccc;
}
.section-left a{
margin-left: 32px;
color: #757575;
}
.section-left span{
margin-left: 16px;
padding-left: 16px;
color: #757575;
border-left: 1px solid #ccc;
}
.section-left i{
color: #ff6700;
}
.settlement{
margin-left: 40px;
padding:0 40px ;
font-size: 18px;
background-color: orange;
color: #fff;
}
.total-price{
color: #ff6700;
}
.total-price em{
font-size: 30px;
}js結(jié)構(gòu)
//獲取到頁面中所有復(fù)選框check
var check = document.querySelectorAll('.check');
console.log(check.length);
//獲取到商品欄復(fù)選框
var single = document.querySelectorAll('.single');
console.log(single.length);
//獲取每一行商品欄
var itemBox = document.querySelectorAll('.item-box');
console.log(itemBox);
for(var i=0;i<check.length;i++){
//給所有復(fù)選框添加事件
check[i].onclick = function(e){
//判斷是否全選
var count = 0;
//判斷全選框
if(e.target.getAttribute('id') == 'all'){
//把全選狀態(tài)賦值給每一個(gè)checkbox
for(j=0;j<single.length;j++){
single[j].checked = this.checked
}
}
for(var k = 0; k<single.length;k++){
if(single[k].checked){
count++;
}
if( count == single.length){
check[0].checked = true;
}else{
check[0].checked = false;
}
}
fTotal();
}
}
//給商品每一行添加事件
for(var i = 0;i<itemBox.length;i++){
itemBox[i].onclick = function(e){
var input = this.getElementsByTagName('input')[1];
switch(e.target.className){
case 'jiahao':
// alert('加');
input.value = parseInt(input.value)+1;
fTotalSum(this);
break;
case 'jianhao':
// alert('減');
input.value = parseInt(input.value)-1 <=1 ? 1:parseInt(input.value)-1;
fTotalSum(this);
break;
case 'col col-action u-r':
var con = confirm('確定刪除嗎？');
if( con ){
this.parentNode.removeChild(this);
}
break;
}
//調(diào)用 計(jì)算總數(shù)量和總價(jià)
fTotal()
}
}
// 定義一個(gè)函數(shù)計(jì)算 小計(jì) That === this 就是商品每一行
function fTotalSum(That){
//獲取當(dāng)前行的數(shù)量
var num = That.getElementsByTagName('input')[1].value;
//獲取當(dāng)前行的單價(jià) 取整是為了省略掉'元'字符串，方便計(jì)算
var price = parseInt(That.querySelector('.col-price').innerHTML);
// 最終小計(jì)值為數(shù)量乘以單價(jià)
That.querySelector('.col-sum').innerHTML = num * price+'元';
};
//定義一個(gè)函數(shù) 方便調(diào)用總數(shù)量 和 合計(jì)
function fTotal(){
//獲取到總價(jià)節(jié)點(diǎn)
var totalPrice = document.getElementById('totalPrice');
//總價(jià)
var price = 0;
//獲取到總件節(jié)點(diǎn)
var totalNum = document.getElementById('totalNum');
//數(shù)量總和
var Num = 0;
//獲取每一行商品盒子
var itemBox = document.querySelectorAll('.item-box');
for(var i = 0; i<itemBox.length;i++){
itemBox[i].getElementsByTagName('input')[1].value;
//選中了，才拿數(shù)量和價(jià)格
if( itemBox[i].getElementsByTagName('input')[0].checked ){
Num += parseInt(itemBox[i].getElementsByTagName('input')[1].value);
price += parseInt(itemBox[i].querySelector('.col-sum').innerHTML);
}
}
//合并把總和數(shù)量寫到標(biāo)簽里
totalNum.innerHTML = Num;
totalPrice.innerHTML = price;
}感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript如何實(shí)現(xiàn)購物車怎么”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼