js实现购物车结算界面
模拟了个商品界面，点击购买后相应的商品数量加一；选中后才计算价格，可以删除商品和添加商品，点击相同的商品时，商品数量加一，可以生成商品在购物车，可以全选和取消全选。
·
一、商品添加到购物车
模拟了个商品界面，点击购买后相应的商品数量加一；
二、购物车商品的单选
当选时，选择的商品计算价格到应付金额
三、购物车商品的全选
当购物车全选按钮未被选中的时候，呈现出全选按钮状态，点击，购物车里的全部商品都被选中，按商品价格和数量计算总的应付金额。
四、商品的删除
点击对应商品的删除，这个商品被删除；
五、购物车的商品数量修改
可直接在购物车里点击“+”和“-”按钮来操作，限定最小数目为0，无法小于0；
还可以通过在商品浏览界面点击购买，若有该商品，则只修改数量，若购物车里没有该商品，则创建该商品的li,设置数量为1；
六、确认选中之后然后在计算的功能
通过是否被选中来确定是否参加总金额的计算。
源码：
html和js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./gwc.css">
<script type="text/javascript">
window.onload=function(){
let zt={
A:true,
B:true,
C:true,
D:true
};
let btns=document.getElementsByClassName("btn2");
let qx=document.getElementsByClassName("btn-end")[0];
let qxfont=document.getElementById("qx");
let topbtns=document.getElementsByClassName("btn");
let texts=document.getElementsByClassName("biaoji");
let q1=document.getElementById("+1");
let p1=document.getElementById("-1");
let q2=document.getElementById("+2");
let p2=document.getElementById("-2");
let q3=document.getElementById("+3");
let p3=document.getElementById("-3");
let q4=document.getElementById("+4");
let p4=document.getElementById("-4");
let sum=0,money=document.getElementById("money");
let price=[2399,8999,2999,5399];
let ul=document.getElementById("Love-life");
let p3s=document.getElementsByClassName("p3");
let lis=ul.getElementsByTagName("li");
let btn3=document.getElementById("btn3");
lis[0].flag='A';
lis[1].flag='B';
lis[2].flag='C';
lis[3].flag='D';
function del(){
for(let i=0;i<p3s.length;i++){
p3s[i].i=i;
p3s[i].onclick=function(){
let flag=this.parentNode.flag;
ul.removeChild(this.parentNode);
zt[flag]=false;
price.splice(p3s[i].i-1,1);
for(let i=0;i<p3s.length;i++){
p3s[i].i=i-1;
}
}
}
}
del();
function data(){
let li=document.createElement("li");
let div=document.createElement("div");
let img=document.createElement("img");
let p1=document.createElement("p");
let p2=document.createElement("p");
let label=document.createElement("label");
let btn1=document.createElement("button");
let btn2=document.createElement("button");
let inputtext=document.createElement("input");
let p3=document.createElement("p");
let a=document.createElement("a");
li.flag='A';
div.className="btn2";
a.href="javascript:del1()";
a.innerText="删除";
btn1.innerText="+";
btn2.innerText="-";
p3.className="p3";
p3.onclick=function(){
let flag=this.parentNode.flag;
ul.removeChild(this.parentNode);
zt[flag]=false;
}
p3.appendChild(a);
inputtext.setAttribute("type","text");
inputtext.className="biaoji";
btn1.id="+1";
btn2.id="-1";
label.className="box";
label.appendChild(btn1);
label.appendChild(inputtext);
label.appendChild(btn2);
p1.className="p1";
p2.className="p2";
p1.innerText="Xiaomi Civi 2(仿生双眸｜氛围人像)";
p2.innerText="2399元";
img.src="./商品1.webp";
div.className="btn2";
div.onclick=dj;
li.appendChild(div);
li.appendChild(img);
li.appendChild(p1);
li.appendChild(p2);
li.appendChild(label);
li.appendChild(p3);
ul.appendChild(li);
zt.A=true;
allbangding();
inputtext.value="1";
btn1.onclick=q1js;
price.push(2399);
btn2.onclick=p1js;
}
function js(){
sum=0;
for(let i=0;i<btns.length;i++){
if(btns[i].flag==true){
sum+=parseInt(texts[i].value)*price[i];
}
}
money.innerText=String(sum)+"￥";
}
function q1js(){
for(let i=0;i<lis.length;i++){
if(lis[i].flag=='A'){
texts[i].value=String(parseInt(texts[i].value)+1);
if(btns[i].flag==true){
js();
}
}
}
}
function q2js(){
for(let i=0;i<lis.length;i++){
if(lis[i].flag=='B'){
texts[i].value=String(parseInt(texts[i].value)+1);
if(btns[i].flag==true){
js();
}
}
}
}
function q3js(){
for(let i=0;i<lis.length;i++){
if(lis[i].flag=='C'){
texts[i].value=String(parseInt(texts[i].value)+1);
if(btns[i].flag==true){
js();
}
}
}
}
function q4js(){
for(let i=0;i<lis.length;i++){
if(lis[i].flag=='D'){
texts[i].value=String(parseInt(texts[i].value)+1);
if(btns[i].flag==true){
js();
}
}
}
}
function p1js(){
for(let i=0;i<lis.length;i++){
if(lis[i].flag=='A'){
texts[i].value=String(parseInt(texts[i].value)-1);
if(parseInt(texts[i].value)<0){
texts[i].value="0";
}
if(btns[i].flag==true){
js();
}
}
}
}
function p2js(){
for(let i=0;i<lis.length;i++){
if(lis[i].flag=='B'){
texts[i].value=String(parseInt(texts[i].value)-1);
if(parseInt(texts[i].value)<0){
texts[i].value="0";
}
if(btns[i].flag==true){
js();
}
}
}
}
function p3js(){
for(let i=0;i<lis.length;i++){
if(lis[i].flag=='C'){
texts[i].value=String(parseInt(texts[i].value)-1);
if(parseInt(texts[i].value)<0){
texts[i].value="0";
}
if(btns[i].flag==true){
js();
}
}
}
}
function p4js(){
for(let i=0;i<lis.length;i++){
if(lis[i].flag=='D'){
texts[i].value=String(parseInt(texts[i].value)-1);
if(parseInt(texts[i].value)<0){
texts[i].value="0";
}
if(btns[i].flag==true){
js();
}
}
}
}
function allbangding(){
texts=document.getElementsByClassName("biaoji");
for(let i=0;i<texts.length;i++){
texts[i].value="0";
}
q1.onclick=q1js;
p1.onclick=p1js;
q2.onclick=q2js;
p2.onclick=p2js;
q3.onclick=q3js;
p3.onclick=p3js;
q4.onclick=q4js;
p4.onclick=p4js;
}
allbangding();
for(let i=0;i<topbtns.length;i++){
topbtns[i].onclick=function(){
texts[i].value=String(parseInt(texts[i].value)+1);
}
}
topbtns[0].onclick=function(){
if(zt.A==true){
for(let i=0;i<lis.length;i++){
if(lis[i].flag=="A"){
let text=lis[i].getElementsByClassName("biaoji")[0];
text.value=String(parseInt(text.value)+1);
}
}
}
else{
data();
}
}
topbtns[1].onclick=function(){
if(zt.B==true){
for(let i=0;i<lis.length;i++){
if(lis[i].flag=="B"){
let text=lis[i].getElementsByClassName("biaoji")[0];
text.value=String(parseInt(text.value)+1);
}
}
}
else{
data();
}
}
topbtns[2].onclick=function(){
if(zt.C==true){
for(let i=0;i<lis.length;i++){
if(lis[i].flag=="C"){
let text=lis[i].getElementsByClassName("biaoji")[0];
text.value=String(parseInt(text.value)+1);
}
}
}
else{
data();
}
}
topbtns[3].onclick=function(){
if(zt.D==true){
for(let i=0;i<lis.length;i++){
if(lis[i].flag=="D"){
let text=lis[i].getElementsByClassName("biaoji")[0];
text.value=String(parseInt(text.value)+1);
}
}
}
else{
data();
}
}
qx.flag=false;
qx.onclick=function(){
if(this.flag==true){
this.flag=false;
this.style.backgroundColor="white";
for(let i=0;i<btns.length;i++){
btns[i].style.backgroundColor="white";
btns[i].flag=false;
}
qxfont.innerText="全选";
}
else{
this.flag=true;
this.style.backgroundColor="#fc5400";
for(let i=0;i<btns.length;i++){
btns[i].style.backgroundColor="#fc5400";
btns[i].flag=true;
}
qxfont.innerText="取消全选";
}
js();
}
function dj() {
if(this.flag==true){
this.flag=false;
this.style.backgroundColor="white";
}
else{
this.flag=true;
this.style.backgroundColor="#fc5400"
}
js();
}
for(let i=0;i<btns.length;i++){
btns[i].flag=false;
btns[i].onclick=dj;
}
btn3.onclick=function(){
if(confirm("确认付款吗？")){
alert("共计"+money.innerText+",付款成功，祝你生活愉快!");
}
}
}
</script>
</head>
<body>
<h1 class="head">热门商品</h1>
<div class="position">
<div class="goods">
<img src="./商品1.webp" alt="">
<h3 > Xiaomi Civi 2</h3>
<p class="miaoshu">仿生双眸｜氛围人像</p>
<p class="price">2399元起</p>
<button class="btn">购买</button>
</div>
<div class="goods">
<img src="./商品2.webp" alt="">
<h3 > Xiaomi MIX Fold 2</h3>
<p class="miaoshu">超轻薄折叠机身设计，小米自研微...</p>
<p class="price">8999元起</p>
<button class="btn">购买</button>
</div>
<div class="goods">
<img src="./商品3.webp" alt="">
<h3 >Redmi K50 至尊版</h3>
<p class="miaoshu">骁龙8+ ｜1.5K 高清直屏</p>
<p class="price">2999元起</p>
<button class="btn">购买</button>
</div>
<div class="goods">
<img src="./商品4.webp" alt="">
<h3 > Xiaomi 12S Ultra</h3>
<p class="miaoshu">这真徕卡｜专业徕卡影像</p>
<p class="price">5399元起</p>
<button class="btn">购买</button>
</div>
</div>
<h1 class="head">购物车</h3>
<div id="warp-ul">
<div id="t1">
<h3 class="head1">商品名称</h3>
<h3 class="head2">价格</h3>
<h3 class="head3">数量</h3>
<h3 class="head4">操作</h3>
</div>
<ul id="Love-life">
<li>
<div class="btn2"></div>
<img src="./商品1.webp"/>
<p class="p1">Xiaomi Civi 2(仿生双眸｜氛围人像)</p>
<p class="p2">2399元</p>
<label class="box"><button id="+1">+</button><input type="text" class="biaoji" placeholder="0"/><button id="-1">-</button></label>
<p class="p3"><a href="javascript:del1()">删除</a></p>
</li>
<li>
<div class="btn2"></div><img src="./商品2.webp"/>
<p class="p1">Xiaomi MIX Fold 2(超轻薄折叠机身设计)</p>
<p class="p2">8999元</p>
<label class="box""><button id="+2">+</button><input type="text" class="biaoji" placeholder="0"/><button id="-2">-</button></label>
<p class="p3"><a href="#">删除</a></p>
</li>
<li>
<div class="btn2"></div><img src="./商品3.webp"/>
<p class="p1">Redmi K50 至尊版(骁龙8+｜1.5K 高清直屏)</p>
<p class="p2">2999元</p>
<label class="box""><button id="+3">+</button><input type="text" class="biaoji" placeholder="0"/><button id="-3">-</button></label>
<p class="p3"><a href="#">删除</a></p>
</li>
<li>
<div class="btn2"></div><img src="./商品4.webp"/>
<p class="p1">Xiaomi 12S Ultra(这真徕卡｜专业徕卡影像)</p>
<p class="p2">5399元</p>
<label class="box""><button id="+4">+</button><input type="text" class="biaoji" placeholder="0"/><button id="-4">-</button></label>
<p class="p3"><a href="#">删除</a></p>
</li>
</ul>
<div class="js">
<label class="left"><span id="qx">全选</span><div class="btn-end"></div></label>
<p id="gd">应付金额：</p>
<p id="money">0￥</p>
<button id="btn3">结算</button>
</div>
</div>
</body>
</html>
css
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
color: rgb(51, 51, 51);
}
HTML{
background-color: #f5f5f5;
}
.head{
margin-top: 30px;
color: #f90000;
text-align: center;
}
.position{
margin: 50px auto;
width: 1200px;
height: 290px;
padding: 20px;
}
.goods{
width: 250px;
height: 290px;
margin-left: 35px;
text-align: center;
display: inline-block;
background-color: #ffffff;
}
.goods img{
width: 150px;
height: 150px;
margin-bottom: 5px;
}
.goods >h3{
font-size: 17px;
color: #333;
margin: 10px 0;
font-family: Helvetica, Arial,sans-serif;
}
.goods .miaoshu{
font-size: 13px;
margin-bottom: 10px;
color: #b0b0b0;
}
.goods .price{
font-size: 19px;
color: #ff6700;
}
.goods .btn{
margin-top: 5px;
border: 1px #cccccc solid;
width: 70px;
height: 30px;
background-color: #aaaa7f;
border-radius: 7px 7px ;
font-size: 15px;
color: #ebebeb;
}
.btn:hover{
background-color: #ff6700;
}
.goods:hover{
box-shadow: 3px 3px 3px #556;
transform: scale(1.01);
}
#warp-ul{
margin: 0 auto;
height: 100px;
width: 1130px;
position: relative;
}
#t1{
margin-top: 30px;
background-color: #ebebeb;
height: 30px;
}
#t1 >h3{
display: inline-block;
}
.head1{
margin-left: 30px;
}
.head2{
margin-left: 35%;
}
.head3{
margin-left: 20%;
}
.head4{
margin-left: 17%;
}
#warp-ul ul li{
padding: 10px;
height: 100px;
position: relative;
padding: 10px;
border-bottom: 1px #ccc dashed;
}
.btn2{
position: absolute;
width: 20px;
height: 20px;
border:1px #ccc solid;
border-radius: 50%;
top: 50px;
left: 10px;
}
#warp-ul ul li img{
margin-left: 15px;
display: inline-block;
width: 100px;
height: 100px;
}
#warp-ul ul li .p1,.p2,.p3{
font-weight: 600;
display: inline-block;
position: absolute;
top: 50px;
margin-left: 30px;
}
#warp-ul ul li .p2{
left: 470px;
}
#warp-ul ul li .p3{
right: 87px;
}
#warp-ul ul li .box{
width: 106px;
height: 31px;
border: 1px #ccc solid;
position: absolute;
top: 50px;
left: 740px;
}
#warp-ul ul li .box button{
width: 31px;
height: 31px;
font-size: 21px;
}
#warp-ul ul li .box input{
width: 40px;
height: 27px;
font-size: 21px;
text-align: center;
}
#warp-ul ul{
background-color: white;
}
.js{
position: relative;
height: 75px;
width: 1130px;
margin: 30px auto;
border: 1px white solid;
background-color: white;
}
.js #gd{
position: absolute;
right: 290px;
top: 25px;
display: inline-block;
}
.js #money{
top: 25px;
position: absolute;
right: 200px;
display: inline-block;
font-size: 20px;
color: #ff6700;
}
.js #btn3{
top: 15px;
position: absolute;
right: 50px;
width: 100px;
height: 50px;
background-color: #ff6700;
color: white;
}
.btn-end{
position: absolute;
width: 20px;
height: 20px;
border:1px #ccc solid;
border-radius: 50%;
top: 0px;
left: 75px;
}
.js .left{
top: 25px;
position: absolute;
left: 20px;
}
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
10
0- 0
已为社区贡献1条内容
所有评论(0)