- 技术博客
- 2020-09-03购物车 （小项目）
购物车
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
<style
>
table
{
border
: #
999 1px solid
;margin
: 20px auto
;text
-align
: center
;
}
td
{border
-right
: #
999 1px solid
;border
-top
: #
999 1px solid
;}
tr
{height
: 50px
;}
.model
{display
: none
;}
div
{width
:740px
;margin：
15px auto
;}
</style
>
</head
>
<body
>
<div
>
<input type
="text" class="menuname">
<input type
="text" class="prises">
<button id
="btn">添加
</button
>
</div
>
<table
>
<thead
>
<tr style
="background-color: blue;">
<th style
="width: 120px;">商品名称
</th
>
<th style
="width: 160px;">数量
</th
>
<th style
="width: 160px;">单价
</th
>
<th style
="width: 150px;">小计
</th
>
<th style
="width: 150px;">操作
</th
>
</tr
>
</thead
>
<tbody
>
<tr
>
<td
>烧煎饼
</td
>
<td
class="count">
<button
class="minus">-</button
>
<span
>0</span
>
<button
class="add">+</button
>
</td
>
<td
>
单价：
<span
class="price">15元
</span
>
</td
>
<td
>
小计
<span
class="subtotal">0</span
>元
</td
>
<td
>
操作：
<button
class="del">删除
</button
>
</td
>
</tr
>
<tr
>
<td
>水煮鱼
</td
>
<td
class="count">
<button
class="minus">-</button
>
<span
>0</span
>
<button
class="add">+</button
>
</td
>
<td
>
单价：
<span
class="price">17元
</span
>
</td
>
<td
>
小计
<span
class="subtotal">0</span
>元
</td
>
<td
>
操作：
<button
class="del">删除
</button
>
</td
>
</tr
>
<tr
>
<td
>黄焖鸡
</td
>
<td
class="count">
<button
class="minus">-</button
>
<span
>0</span
>
<button
class="add">+</button
>
</td
>
<td
>
单价：
<span
class="price">10元
</span
>
</td
>
<td
>
小计
<span
class="subtotal">0</span
>元
</td
>
<td
>
操作：
<button
class="del">删除
</button
>
</td
>
</tr
>
<tr
class="model">
<td style
="width: 120px;"></td
>
<td
class="count" style
="width: 160px;">
<button
class="minus">-</button
>
<span
>0</span
>
<button
class="add">+</button
>
</td
>
<td
>
单价：
<span
class="price">10</span
>元
</td
>
<td style
="width: 150px;">
小计
<span
class="subtotal">0</span
>元
</td
>
<td style
="width: 150px;">
操作：
<button
class="del">删除
</button
>
</td
>
</tr
>
</tbody
>
<tfoot
>
<tr
>
<td colspan
="5">商品一共
<span
class="totalcount">0</span
>件，共计花费
<span
class="totalprice">0</span
>元
</td
>
</tr
>
</tfoot
>
</table
>
<script
>
var oadd
= document
.querySelectorAll("tr .add");
var ominus
= document
.querySelectorAll("tr .minus");
var oaddspan
= document
.querySelectorAll(".count span")[0];
var osubtotal
= document
.querySelectorAll(".subtotal");
var otbody
= document
.querySelector("tbody");
var omenuname
= document
.getElementsByClassName("menuname")[0];
var oprises
= document
.getElementsByClassName("prises")[0];
var obtn
= document
.getElementById("btn");
aggregate = function(){
var trList
= otbody
.querySelectorAll("tr");
if(trList
.length
=== 1){
document
.querySelector(".totalcount").innerHTML
= 0;
document
.querySelector(".totalprice").innerHTML
= 0;
return;
}
var totalCount
= 0;
var totalPrice
= 0;
for(let i
= 0; i
< trList
.length
;i
++){
totalCount
+= parseInt(trList
[i
].children
[1].getElementsByTagName("span")[0].innerHTML
);
totalPrice
+= parseFloat(trList
[i
].querySelectorAll(".subtotal")[0].innerHTML
);
}
document
.querySelector(".totalcount").innerHTML
= totalCount
;
document
.querySelector(".totalprice").innerHTML
= totalPrice
;
}
otbody
.onclick = function(event
){
var _this
= event
.target
;
if(_this
.className
=== "add"){
let addall
= parseInt(_this
.parentElement
.querySelector("span").innerHTML
) + 1;
_this
.parentElement
.querySelector("span").innerHTML
= addall
;
_this
.parentElement
.parentElement
.children
[3].querySelector("span").innerHTML
= addall
* parseInt(_this
.parentElement
.parentElement
.children
[2].querySelector("span").innerHTML
);
aggregate();
}
if(_this
.className
=== "minus"){
let minusall
= parseInt(_this
.parentElement
.querySelector("span").innerHTML
) - 1;
if(minusall
+ 1 <= 0){
minusall
= 0;
}
_this
.parentElement
.querySelector("span").innerHTML
= minusall
;
_this
.parentElement
.parentElement
.children
[3].querySelector("span").innerHTML
= minusall
* parseInt(_this
.parentElement
.parentElement
.children
[2].querySelector("span").innerHTML
);
aggregate();
}
if(_this
.className
=== "del"){
_this
.parentElement
.parentElement
.parentElement
.removeChild(_this
.parentElement
.parentElement
)
var trList
= otbody
.querySelectorAll("tr");
var totalCount
= 0;
var totalPrice
= 0;
for(let i
= 0; i
< trList
.length
;i
++){
totalCount
+= parseInt(trList
[i
].children
[1].getElementsByTagName("span")[0].innerHTML
);
totalPrice
+= parseFloat(trList
[i
].querySelectorAll(".subtotal")[0].innerHTML
);
}
document
.querySelector(".totalcount").innerHTML
= totalCount
;
document
.querySelector(".totalprice").innerHTML
= totalPrice
;
}
}
obtn
.onclick = function(){
if( omenuname
.value
=== ""){
return
}
var otr
= document
.getElementsByClassName("model")[0].cloneNode(true);
otr
.className
= "";
otbody
.appendChild(otr
);
otr
.children
[0].innerHTML
= omenuname
.value
;
omenuname
.value
= "";
otr
.children
[2].children
[0].innerHTML
= oprises
.value
;
oprises
.value
= "";
aggregate();
}
</script
>
</body
>
</html
>
