快捷導(dǎo)航

JavaScript實(shí)現(xiàn)購(gòu)物車(chē)案例

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

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

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)購(gòu)物車(chē)功能的具體代碼，供大家參考，具體內(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>
? ? <!-- 簡(jiǎn)單寫(xiě)個(gè)大盒子分大三欄 -->
? ? <div class="cart">
? ? ? ? <!-- 購(gòu)物車(chē)頭部 -->
? ? ? ? <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">單價(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>
? ? ? ? <!-- 購(gòu)物車(chē)列表 -->
? ? ? ? <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 移動(dòng)版 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 移動(dòng)版 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 移動(dòng)版 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 移動(dòng)版 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>
? ? ? ? <!-- 購(gòu)物車(chē)底部 -->
? ? ? ? <div class="cart-foot">
? ? ? ? ? ? <div class="section-left u-l">
? ? ? ? ? ? ? ? <a href="">繼續(xù)購(gòu)物</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)符號(hào)樣式 */
ul,ol,li{
? ? list-style: none
}
/* 左浮動(dòng) */
.u-l{
? ? float: left;
}
/* 右浮動(dòng) */
.u-r{
? ? float: right;
}
/* 清除浮動(dòng) */
.clearfix{
? ? clear: both;
}

.cart{
? ? margin:0 auto;
? ? width: 1200px;
}?
/* 購(gòu)物車(chē)頭部樣式 */
.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;
}
?
/* 購(gòu)物車(chē)商品樣式 */
.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)

//獲取到頁(yè)面中所有復(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ù)量寫(xiě)到標(biāo)簽里
? ? totalNum.innerHTML = Num;
? ? totalPrice.innerHTML = price;
}

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

您可能感興趣的文章:

相關(guān)文章

webpack中的filename 和 chunkFilename 的區(qū)別實(shí)例解析
filename 指列在 entry 中,打包后輸出的文件的名稱,chunkFilename 指未列在 entry 中,卻又需要被打包出來(lái)的文件的名稱,這篇文章主要介紹了webpack中的filename 和 chunkFilename 的區(qū)別實(shí)例解析,需要的朋友可以參考下
2023-11-11
這篇文章主要介紹了微信小程序 WXML節(jié)點(diǎn)信息查詢?cè)斀?文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07

Javascript實(shí)現(xiàn)DIV滾動(dòng)自動(dòng)滾動(dòng)到底部的代碼

一個(gè)比較特殊的客戶要求，在一個(gè)頁(yè)面用表格顯示數(shù)據(jù)，數(shù)據(jù)量不是很多，不希望使用瀏覽器的滾動(dòng)條，只能在Div中滾動(dòng)table中的數(shù)據(jù)，但是有個(gè)特殊的要求，就是必須將滾動(dòng)條自動(dòng)滾動(dòng)到底部

2012-03-03

js for終止循環(huán) 跳出多層循環(huán)

這篇文章主要介紹了js for等循環(huán) 跳出多層循環(huán)，終止循環(huán)執(zhí)行的方法,需要的朋友可以參考下

2018-10-10

js前端實(shí)現(xiàn)登錄拼圖驗(yàn)證功能

行為驗(yàn)證碼通過(guò)用戶的操作來(lái)完成驗(yàn)證,常見(jiàn)的行為驗(yàn)證碼有拖動(dòng)式和點(diǎn)觸式,下面這篇文章主要給大家介紹了關(guān)于js前端實(shí)現(xiàn)登錄拼圖驗(yàn)證功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

2023-02-02