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"> </div> ? ? ? ? ? ? <div class="col col-name u-l">商品名稱(chēng)</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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vuejs手把手教你寫(xiě)一個(gè)完整的購(gòu)物車(chē)實(shí)例代碼
- js購(gòu)物車(chē)實(shí)現(xiàn)思路及代碼(個(gè)人感覺(jué)不錯(cuò))
- JavaScript編寫(xiě)一個(gè)簡(jiǎn)易購(gòu)物車(chē)功能
- Javascript實(shí)現(xiàn)購(gòu)物車(chē)功能的詳細(xì)代碼
- js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)有圖有代碼
- Jsp+Servlet實(shí)現(xiàn)購(gòu)物車(chē)功能
- Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車(chē)程序
- 原生js模擬淘寶購(gòu)物車(chē)項(xiàng)目實(shí)戰(zhàn)
- 簡(jiǎn)單的前端js+ajax 購(gòu)物車(chē)框架(入門(mén)篇)
- js實(shí)現(xiàn)仿購(gòu)物車(chē)加減效果
相關(guān)文章
用簡(jiǎn)單的腳本實(shí)現(xiàn)一款漂亮的下拉菜單
用簡(jiǎn)單的腳本實(shí)現(xiàn)一款漂亮的下拉菜單...2006-12-12
extjs簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了extjs簡(jiǎn)介，ExtJS為開(kāi)發(fā)者在開(kāi)發(fā)富客戶的B/S應(yīng)用中提供豐富的UI組件，具有統(tǒng)一的主題，便于快速開(kāi)發(fā)，提高效率2017-07-07
JavaScript中使用replace結(jié)合正則實(shí)現(xiàn)replaceAll的效果
JavaScript?中使用?replace?達(dá)到?replaceAll的效果，其實(shí)就用利用的正則的全局替換。2010-06-06
如何防止回車(chē)（enter）鍵提交表單，其實(shí)很簡(jiǎn)單，就一句話。onkeydown="if(event.keyCode==13)return false;"把這句寫(xiě)在from標(biāo)簽里面就好了2015-12-12
使用JavaScript進(jìn)行進(jìn)制轉(zhuǎn)換將字符串轉(zhuǎn)換為十進(jìn)制
JS 是一個(gè)很神奇的語(yǔ)言，可以將任意進(jìn)制字符串轉(zhuǎn)換為十進(jìn)制，如二進(jìn)制，八進(jìn)制，十六進(jìn)制, 第二數(shù)數(shù)不寫(xiě)即為最常用的轉(zhuǎn)換為整型十進(jìn)制2014-09-09
使用CoffeeScrip優(yōu)美方式編寫(xiě)javascript代碼
CoffeeScript就是JavaScript，他進(jìn)行的是一對(duì)一的編譯，或者說(shuō)是翻譯，而且編譯成的JavaScript代碼可讀性很強(qiáng)。本文給大家介紹使用CoffeeScript優(yōu)美方式編寫(xiě)javascript代碼，感興趣的朋友一起看看吧2015-10-10
JavaScript 匿名函數(shù)（anonymous function）與閉包（closure）
JavaScript 匿名函數(shù)（anonymous function）與閉包（closure） ,學(xué)習(xí)js的朋友可以參考下。2011-10-10
javascript:FF/Chrome與IE動(dòng)態(tài)加載元素的區(qū)別說(shuō)明
今天在寫(xiě)一段js時(shí)，發(fā)現(xiàn)IE與FF在動(dòng)態(tài)加載Html元素時(shí)，有一些差別，一起過(guò)來(lái)看看下面的代碼吧2014-01-01
JS實(shí)現(xiàn)微信彈出搜索框 多條件查詢功能
這篇文章主要介紹了JS實(shí)現(xiàn)微信彈出搜索框 多條件查詢功能的實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
Layui數(shù)據(jù)表格判斷編輯輸入的值,是否為我需要的類(lèi)型詳解
今天小編就為大家分享一篇Layui數(shù)據(jù)表格判斷編輯輸入的值,是否為我需要的類(lèi)型詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10