JavaScript實現(xiàn)購物車案例

更新時間：2022年01月13日 10:41:20 作者：HAI6545

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)購物車案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)購物車功能的具體代碼，供大家參考，具體內(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>
? ? <!-- 簡單寫個大盒子分大三欄 -->
? ? <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">&nbsp;</div>
? ? ? ? ? ? <div class="col col-name u-l">商品名稱</div>
? ? ? ? ? ? <div class="col col-price u-l">單價</div>
? ? ? ? ? ? <div class="col col-num u-l">數(shù)量</div>
? ? ? ? ? ? <div class="col col-sum u-l">小計</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 千峰藍</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 千峰藍</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 千峰藍</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 千峰藍</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">合計： <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)簽都有默認的樣式 清除默認樣式 */
*{
? ? margin: 0;padding: 0
}
/* 清除加粗標(biāo)簽的默認樣式 */
b,strong{
? ? font-weight: normal
}
/* 清除傾斜標(biāo)簽的默認樣式 */
i,em{
? ? font-style: normal
}
/* 清除默認下劃線 */
a,u{
? ? text-decoration: none
}
/* 超鏈接默認顏色為黑色 */
a{
? ? color: #000;
}
/* 清除列表的默認符號樣式 */
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)賦值給每一個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)用 計算總數(shù)量和總價
? ? ? ? fTotal()
? ? } ??
}
// 定義一個函數(shù)計算 小計 That === this 就是商品每一行
function fTotalSum(That){
?
? ? //獲取當(dāng)前行的數(shù)量
? ? var num = That.getElementsByTagName('input')[1].value;
? ? //獲取當(dāng)前行的單價 ?取整是為了省略掉'元'字符串，方便計算
? ? var price = parseInt(That.querySelector('.col-price').innerHTML);
? ? // 最終小計值為數(shù)量乘以單價
? ? That.querySelector('.col-sum').innerHTML = num * price+'元';
};
//定義一個函數(shù) 方便調(diào)用總數(shù)量 ?和 合計
function fTotal(){
? ? //獲取到總價節(jié)點
? ? var totalPrice = document.getElementById('totalPrice');
? ? //總價
? ? var price = 0;
? ? //獲取到總件節(jié)點
? ? 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ù)量和價格
? ? ? ? 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;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: