JavaScript實現購物車案例
阿新 • • 發佈：2022-01-13
本文例項為大家分享了實現購物車功能的具體程式碼，供大家參考，具體內容如下
HTML結構
<!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=".//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"> </div>
<div class="col col-name u-l">商品名稱</div>
<div class="col col-price u-l">單價</div>
<div class="col col-num u-l">數量</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-chqJJESLIW
css結構
/* 瀏覽器和標籤都有預設的樣式 清除預設樣式 */
*{
margin: 0;padding: 0
}
/* 清除加粗標籤的預設樣式 */
b,strong{
font-weight: normal
}
/* 清除傾斜標籤的預設樣式 */
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結構
//獲取到頁面中所有複選框check
var check = document.querySelectorAll('.check');
console.log(check.length);
//獲取到商品欄複選框
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++){
//給所有複選框新增事件
check[i].onclick = function(e){
//判斷是否全選
var count = 0;
//判斷全選框
if(e.target.getAttribute('id') == 'all'){
//把全選狀態賦值給每一個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;
}
//呼叫 計算總數量和總價
fTotal()
}
}
// 定義一個函式計算 小計 That === this 就是商品每一行
function fTotalSum(That){
//獲取當前行的數量
var num = That.getElementsByTagName('input')[1].value;
//獲取當前行的單價 取整是為了省略掉'元'字串，方便計算
var price = parseInt(That.querySelector('.col-price').innerHTML);
// 最終小計值為數量乘以單價
That.querySelector('.col-sum').innerHTML = num * price+'元';
};
//定義一個函式 方便呼叫總數量 和 合計
function fTotal(){
//獲取到總價節點
var totalPrice = document.getElementById('totalPrice');
//總價
var price = 0;
//獲取到總件節點
var totalNum = document.getElementById('totalNum');
//數量總和
var Num = 0;
//獲取每一行商品盒子
var itemBox = document.querySelectorAll('.item-box');
for(var i = 0; i<itemBox.length;i++){
itemBox[i].getElementsByTagName('input')[1].value;
//選中了，才拿數量和價格
if( itemBox[i].getElementsByTagName('input')[0].checked ){
Num += parseInt(itemBox[i].getElementsByTagName('input')[1].value);
price += parseInt(itemBox[i].querySelector('.col-sum').innerHTML);
}
}
//合併把總和數量寫到標籤裡
totalNum.innerHTML = Num;
totalPrice.innerHTML = price;
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。