【javaScript案例】之类似购物车的效果实现
【javaScript案例】之类似购物车的效果实现
xinxin-l
发布于 2022-03-30 16:13:06
发布于 2022-03-30 16:13:06
这次的效果如下图：
实现的效果是在购物车界面选择想要选购的商品，提交后转到支付界面确认支付，最后支付成功后返回选购页面。
我们这篇文章只讲解选购的页面，支付界面见这篇文章：https://xinxin-l.github.io/2022/02/15/%E3%80%90javaScript%E6%A1%88%E4%BE%8B%E3%80%91%E4%B9%8B%E6%94%AF%E4%BB%9810%E7%A7%92%E5%80%92%E8%AE%A1%E6%97%B6/
我们开始咯~
我们首先来实现html和css的部分：如下图
其实这个部分很考验基础功~，我们需要用到table标签，在td中写入对应的文字（具体可见下方的代码，可以根据自己的喜好添加样式）。
重点其实在于js的部分：
这个效果实现的基本功能如下：
- 勾选/不勾选第一列的框，对应第五列的小计中的价格会改变，下方的合计价格会改变
- 选择第一行第一列的全选按钮，下方所有的复选框都会被选中，对应的小计和合计中的价格都会发生改变
- 选择第四列中的-和+，表示要选购该物品的数目，相应的小计和合计中的价格会发生改变
- 点击最后一列的删除键，相应的行会消失，同时合计数目会发生改变
要从哪下手呢，我们按照顺序来解决~
- 我们首先通过
document.getElementsByTagName获取所有的复选框，然后通过onclick函数修改其checked属性，表示选中/不选中。要记住必须要通过一个变量来表示是从选中->未选中，还是未选中->选中。然后如何修改其内容呢？ 我们可以通过parentNode来选出复选框对应的父节点，再在该父节点中选出对应小计中的innerText，修改其内容（要对应前面的单价）=======这样第一点就完成啦，其实还要多研究细节，有很多需要在注意的细节 - 关于全选实现的效果，我们可以和复选框修改内容使用部分相同的代码，（具体可见下面的代码），要记住我们还是需要记录一个变量来判断复选框是否被全选->判断对应的价格是否要发生变化。
- 关于通过加减来修改选购物品的数目，需要多加思考，因为涉及选购数目、小计价格、总计价格的改变，但是大概的思路跟第一点类似，就是通过该节点找到其父节点，然后修改该父节点下的不同子节点的
innerText（但是在修改之前要判断一下对应的复选框是否被选中，若未被选中，就不需要改变相关价格了~） - 最后一点，其实就简单啦，点击删除按钮的时候，我们需要修改的只有两点：一是
display:none，二是如果复选框被选中，需要修改对应的合计的价格
好啦，大概思路就是以上几点啦，具体内容可以参考下面的代码：
<!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>
<style>
*{
margin:0;
padding: 0;
}
table{
/* border:1px solid rgba(0,0,0,.3); */
text-align: center;
margin:60px auto;
margin-bottom: 20px;
width:500px;
border-radius: 20px;
border-spacing: 2px;
}
table td{
border:2px solid rgba(0,0,0,.3);
margin:0;
width: 70px;
height:60px;
border-radius: 20px;
box-shadow: 2px 3px 2px rgba(0,0,0,.3);
}
#hd td{
font-weight:560;
}
tr :nth-child(6){
cursor: pointer;
}
#bott{
text-align: right;
width: 450px;
margin: 30px auto;
font-size:23px;
}
#btn{
width: 50px;
}
table td input{
width: 16px;
height: 16px;
}
.f,.z{
margin: 0 5px;
width: 17px;
}
table td,table button{
background-color: rgba(135, 207, 235, 0.56);
}
#sub{
width: 70px;
height: 35px;
margin-left: 60px;
}
</style>
</head>
<body>
<table>
<tr id="hd">
<td><button id="btn" style="background-color: snow;">全选</button></td>
<td>商品名称</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td style="cursor: auto;">操作</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="a"></td><td>巧克力</td><td>200</td><td><button class="f">-</button><span>1</span><button class="z">+</button></td><td>200</td><td class="del">删除</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="b"></td><td>奥利奥</td><td>100</td><td><button class="f">-</button><span>2</span><button class="z">+</button></td><td>200</td><td class="del">删除</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="c"></td><td>薯片</td><td>50</td><td><button class="f">-</button><span>2</span><button class="z">+</button></td><td>100</td><td class="del">删除</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="c"></td><td>奶茶</td><td>20</td><td><button class="f">-</button><span>2</span><button class="z">+</button></td><td>40</td><td class="del">删除</td>
</tr>
</table>
<div id="bott">
<span>总计：</span>
<span id="total"></span>
<button type="submit" id="sub">提交</button>
</div>
<script>
let btns=document.getElementsByTagName("input");
let total=document.getElementById("total");
let f=document.getElementsByClassName("f");
let z=document.getElementsByClassName("z");
let del=document.getElementsByClassName("del");
let sub=document.getElementById("sub");
document.getElementById("btn").onclick=function(){
let tem=true;
for(let i=0;i<btns.length;i++){
let before=btns[i].checked;
if(before===false){
tem=false;
}
btns[i].checked=true;
click(i,before);
}
if(tem){
total.innerText=0;
for(let i=0;i<btns.length;i++){
btns[i].checked=false;
}
}
}
total.innerText=0;
for(let i=0;i<btns.length;i++){
let before=btns[i].checked;
btns[i].onclick=function(){
if(btns[i].checked===false){
before=true;
}
if(btns[i].checked===true){
before=false;
}
click(i,before);
}
}
function click(i,before){
console.log(btns[i].checked);
console.log(before)
let par=btns[i].parentNode.parentNode;
let price=par.childNodes[5].innerText;
console.log(price)
if(btns[i].checked === true && before === false && par.style.display!=="none"){
total.innerText = parseInt(total.innerText)+parseInt(price);
}
if(btns[i].checked === false && before === true && par.style.display!=="none"){
total.innerText = parseInt(total.innerText)-parseInt(price);
}
}
for(let i=0;i<f.length;i++){
f[i].onclick=function(){
let num=Math.abs(parseInt(f[i].parentNode.innerText));
let par=f[i].parentNode.parentNode;
let little=parseInt(par.childNodes[5].innerText);
let single=parseInt(par.childNodes[3].innerText);
if(num > 0){
num--;
f[i].parentNode.childNodes[1].innerText=num;
par.childNodes[5].innerText=little-single;
if(btns[i].checked===true){
total.innerText = parseInt(total.innerText)-single;
}
}
}
z[i].onclick=function(){
let num=Math.abs(parseInt(f[i].parentNode.innerText));
let par=f[i].parentNode.parentNode;
let little=parseInt(par.childNodes[5].innerText);
let single=parseInt(par.childNodes[3].innerText);
num++;
f[i].parentNode.childNodes[1].innerText=num;
par.childNodes[5].innerText=little+single;
if(btns[i].checked===true){
total.innerText = parseInt(total.innerText)+single;
}
}
}
for(let i=0;i<del.length;i++){
del[i].onclick=function(){
let par=del[i].parentNode;
par.style.display="none";
if(btns[i].checked===true){
total.innerText = parseInt(total.innerText) - parseInt(par.childNodes[5].innerText);
}
}
}
sub.onclick=function(){
alert("总消费"+total.innerText+"元，确定要支付吗？");
for(let i=0;i<btns.length;i++){
btns[i].checked=false;
}
total.innerText=0;
location.href="../特效/支付10秒钟.html";
}
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-02-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读