js单页面的简单购物车（列如库存，支付等功能实现）

已于 2023-12-11 17:32:41 修改
阅读量165 收藏
点赞数
文章标签： javascript 前端 css
于 2023-12-11 17:11:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52840130/article/details/134931790
版权

//先应该判断库存，再进行支付，bug心得体会

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
          .ball{
              width: 700px;
              height: 300px;
              margin: 50px auto;
              display: flex;
            /*  background-color: aqua; */
          justify-content: space-between;
          }
          .ball div{
              width: 200px;
              height: 200px;
              background-color: aqua;
            
          }
         .main div{
             width: 600px;
             height: 50px;
              margin: 50px auto;
              margin-top: -50px;
          }
          .main div input{
              width: 50px;
          }
         .main div .sub{
             width: 30px;
         }
         .main div .add{
              width: 30px;
         }
         .del{
             width: 100px;
         }
        </style>
    </head>
    <body>
     <div class="ball"></div>
    <div class="main"></div>
    
        <script>
            var ball=document.querySelector('.ball')
            var main=document.querySelector('.main')
    var arr=[
        {
            title:'足球',
            price:200,
            id:1,
            num:9
        },
        {
            title:'篮球',
            price:230,
            id:2,
            num:8
        },
        {
            title:'羽毛球',
            price:3,
            id:3,
            num:80
        }
    ]
    //商品渲染
    arr.forEach(function(item,index){
        console.log(item)
        ball.innerHTML+=`<div class="title">
        <p class="${item.id}">${item.title}</p>
        <p>价格${item.price}</p>
            <span class="num">剩余量${item.num}</span>
        <button index="${index}">加入购物车</button>
        </div>`
    })
    var btn=document.querySelectorAll('button')
    var array=[]
    //加入数据在空数组
    for(let i=0;i<btn.length;i++){
    btn[i].οnclick=function(e){
        var target=e.target
        index=target.getAttribute('index')
        console.log(arr[index].id)
        var res=array.some(item=>{ 
         return item.id==arr[index].id 
         }
        )
    
     if(res){
        array.forEach(item=>{
            if(index-0+1==item.id&&item.sun<item.num){
                item.sun++
            }
            else if(item.sun==item.num&&index-0+1==item.id){
                alert('已增添至上限！')
            }
        }
        )
        }
        else{

            array.push(arr[index])
            array.forEach(item=>{
                console.log(index-0+1)
                if(index-0+1==item.id){
                    item.sun=1
                }
            }
            )
        }
        console.log(array)
        //购物车渲染
        var a=0
    array.forEach((item,index)=>{
        var input=document.querySelectorAll('.input')
           if(a==0){
               main.innerHTML=''
           }
            a++
        
                 main.innerHTML+=`<div class="${item.id}">
                 <input type="checkbox" class="input"/> 
                <span class="title">${item.title}</span>
                <button class="sub">-</button>
                <input type="text"  value="${item.sun}" class="input1"/>
                <button class="add">+</button>
                <span class="price1">单价${item.price}</span>
               <span class="num1">剩余量${item.num}</span>
                <span class="price2">总价${item.price*item.sun}</span>
                <button class="del">删除</button>
            </div>`
            
            if(index==array.length-1){
                main.innerHTML+=`<div class="tot"> 
                <input type="checkbox" class="lte"/>
                <span class="tit">合计价格：0</span>
                <button class="pay">支付</button>
                </div>
                `
                
            
                
            }
        
    }
        )
    }

    
        }
        
        document.οnclick=function(){
            
            var tot=0
      var inputs=document.querySelectorAll('.input')
        var tit=document.querySelector('.tit')
        inputs=[...inputs]
        console.log(inputs)
        for(let i=0;i<inputs.length;i++)    {
            //计算tit的合
            if(inputs[i].checked){
                var ID=inputs[i].parentNode.getAttribute('class')
                 console.log(ID)
                 array.forEach((item,index)=>{
                    
                    if(item.id==ID){
                        tot+=item.price*item.sun
                        // item.checked=true
                        tit.innerHTML=`合计价格：${tot}`
                        console.log(item)
                    }
                    }
                    )
                
            }
    
        }
        var inputs=document.querySelectorAll('.input')
        var inputs1=document.querySelectorAll('.input1')
        var price2=document.querySelectorAll('.price2')
        var lte=document.querySelector('.lte')
        var tit=document.querySelector('.tit')
        var sub=document.querySelectorAll('.sub')
        var add=document.querySelectorAll('.add')
        var del=document.querySelectorAll('.del')
        var tot=document.querySelector('.tot')
        var pay=document.querySelector('.pay')
        var num1=document.querySelectorAll('.num1')
        var num=document.querySelectorAll('.num')
        inputs=[...inputs]
        inputs1=[...inputs1]
        price2=[...price2]
        sub=[...sub]
        add=[...add]
        del=[...del]
        num1=[...num1]
        for(let i=0;i<inputs.length;i++){
            console.log(inputs)
            //实现上面元素全打勾时，下面才打勾
            inputs[i].οnclick=function(){
        var res=inputs.every(function(item){
            return item.checked
        })
        // console.log(123)
        lte.checked=res
            //消除上面元素全未打勾时还有合计价格的bug
        var rel=inputs.some(function(item){
            return item.checked
        })
    
        if(!rel){
            tit.innerHTML=`合计价格：0`
        }
        }
        }
        //实现下面元素打勾时，上面全打勾
        lte.οnclick=function(){
            let state = lte.checked
            inputs.forEach(function(item){
                item.checked=state
            })
            // //消除下面元素未打勾时还有合计价格的bug
            if(!state){
                tit.innerHTML=`合计价格：0`
            }
        }
        
        
        //在输入框时可改数字
       for(let i=0;i<inputs1.length;i++){
                inputs1[i].οnblur=function(){
                    var ID=inputs1[i].parentNode.getAttribute('class')
                   var one=0
                    array.forEach(function(item){
                                        
                            if(item.id==ID&&item.sun<item.num&&inputs1[i].value<item.num){
                         one=item.price*inputs1[i].value
                        item.sun=inputs1[i].value
                         price2[i].innerHTML=`总价${one}`
                         }
                        if(inputs1[i].value>item.num&&item.id==ID){
                           alert('超出库存，请重新输入！')
                           inputs1[i].value=1
                           one=item.price*inputs1[i].value
                           item.sun=inputs1[i].value
                           price2[i].innerHTML=`总价${one}`
                        }
                     }
                    )
                    }
            }
           //实现-的按钮功能
     for(let i=0;i<sub.length;i++){
         sub[i].οnclick=function(){
             var ID=sub[i].parentNode.getAttribute('class')
             var one=0
             inputs1[i].value--
             if(inputs1[i].value<=0){
                 inputs1[i].value=0
             }
             array.forEach(function(item){
                                 
                     if(item.id==ID){
                                      one=item.price*inputs1[i].value
                                     item.sun=inputs1[i].value
                                      price2[i].innerHTML=`总价${one}`
                                      }
                                  }
                                )
                                }
         }
         //实现+的按钮功能
      for(let i=0;i<add.length;i++){
               add[i].οnclick=function(){
                   var ID=add[i].parentNode.getAttribute('class')
                   var one=0
                   inputs1[i].value++
                   // if(inputs1[i].value<=0){
                      //  inputs1[i].value=0
                   // }
                   array.forEach(function(item){
                           if(inputs1[i].value>item.num&&item.id==ID){
                            console.log(item.num)
                            alert('已超出库存！')
                            inputs1[i].value=item.num
                            one=item.price*inputs1[i].value
                            item.sun=inputs1[i].value
                            price2[i].innerHTML=`总价${one}`
                        }
                                    
                           if(item.id==ID&&inputs1[i].value<=item.num){
                                            one=item.price*inputs1[i].value
                                           item.sun=inputs1[i].value
                                            price2[i].innerHTML=`总价${one}`
                                            }
                        
                                        }
                         
                                      )
                                      }
               }
              //实现删除的按钮功能
              for(let i=0;i<del.length;i++){
                       del[i].οnclick=function(){
                         if(confirm('确定删除吗？')){
                           var ID=del[i].parentNode.getAttribute('class')
                         del[i].parentNode.remove()
                           var one=0
                         array.forEach(function(item,index){
                                             
                                 if(item.id==ID){
                                              array.splice(index,1)
                                            if(array.length==0){
                                                // console.log(array.length)
                                                tot.remove()
                                            }
                                                  }
                                
                                              }
                                             )
                         }
                         }
                         }
            //实现支付的按钮功能    
    
             pay.οnclick=function(){
                 var a2=0,b=0,c=0,d=0,a1=0
                var flat=true
                 for(let i=0;i<inputs.length;i++)    {
                         var rel=inputs.some(function(item){
                             return item.checked==true
                         }) 
                    if(inputs[i].checked){
                        var ID=inputs[i].parentNode.getAttribute('class')
                    array.forEach((item,index)=>{
                                                     if(item.id==ID&&item.sun<=item.num&&flat){
                                                             
                                                             if(a2==0&&confirm('确定支付吗？')){
                                                                 alert('支付成功！')    
                                                            
                                                             }
                                                            else if(a2==0){
                                                                
                                                                alert('已取消支付！')
                                                                a2++
                                                                a1++
                                                                
                                                            }
                                                           if(a1==0){
                                                            
                                                                item.num=item.num-item.sun
                                                                 a2++
                                                                 num1[index].innerHTML=`剩余量${item.num}`
                                                                 // arr=array
                                                                 // num[index].innerHTML=`剩余量${item.num}`
                                                                 
                                                                    num[index].innerHTML=`剩余量${item.num}`
                                                                    inputs1[i].value=0
                                                               one=item.price*inputs1[i].value
                                                               item.sun=inputs1[i].value
                                                               price2[i].innerHTML=`总价${one}`
                                                                
                                                                }
                                                                
                                                     }
                                                     }
                                                     )
                                                    }
                                                     
                      if(!rel&&c==0){
                            alert('你还未选择商品！')
                            c++
                        }
                 }
             }
                 
         }
        </script>
    </body>
</html>

- 瑾♛年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【JavaWeb】网上蛋糕项目商城-关键字搜索，购物车以及商品详情功能
笔触狂放的博客
05-06 1951
该项目中会存在“立即购买”和“加入购物车”的字样，这里都表示为将该商品添加至购物车，这里的购物车是临时存储，并不会添加到数据库中进行存储，只有用户注册登录之后，才能将购物车中的数据进行购买，形成购买订单信息。查看商品详情的功能在以上各篇文章中都需要涉及，首页中的轮播图商品，热销，新品，商品分类以及商品关键字搜索，甚至后面的购物车功能中都需要查看商品的详情信息，因此这个模块很重要。上文中已经实现热销和新品的商品列表功能，本文篇幅中实现关键字搜索商品，将商品加入购物车，以及查看商品的详情信息等功能。
订单系统功能实现
pink_Pig___的博客
07-12 386
订单系统功能实现
Vue.js实现购物车结算
沐小侠
01-19 1782
1. 使用computed计算属性实现简单的购物车结算功能。 2. 使用watch函数来监听checkboxList属性，实现全选按钮选中或者取消。
JavaWeb购物系统（五）购物车模块的实现
喃灬疯的博客
11-01 5225
到这里我们会发现，有关购物项数量的改变（“+”、“-”、“键盘修改”），我们的购物车采用的是在服务端，即：使用session来存储。：我们在减去购物车中购物项的数量时，购物项的数量不能为0，后边通过。来确定的），然后删除购物车对象中的购物项。域中的值重置为0，防止每次刷新，在原来购物车的总价格上相加。将对应购物项的ID发送给后端，后端来删除对应的购物项。这里我们因为都是局部数据的刷新，所以用到了大量的。购物项数量的获取都是通过输入框中的数据来获取的。（这里是将商品的ID来作为购物项ID的），
JavaWeb 购物车项目
m0_65725031的博客
04-14 1万+
今天是基于我们所学的服务器存储端和三层架构来完善该项目，今天先完善一部分的功能。 一.购物车项目思路 1.登录 先创建一个用户表，表中有id,name,pwd三个属性首。 需要具备一个登录页面，一个处理登录数据的页面，在该页面进行判断，当该用户存在，我们跳转到商城，用户不存在回到登录界面。 2.商城 创建一张商品表 当登录成功以后跳转到商城页面，商城有商品显示，商品数据来自于商品表中的数据。 点击加入购物车，如果点击加入的商品在购物车中存在的话，只增加商品数量，而不会在显示一条该商
[附源码]Node.js计算机毕业设计大型零售电商平台——购物车管理子系统Express
Node程序源码强子
12-12 163
项目运行环境配置：Node.js最新版+ Vs项目技术：Express框架+ Node.js+ Vue 等等组成，B/S模式 +Vscode管理+前后端分离等等。环境需要1.运行环境：最好是Nodejs最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发环境：Vscode或HbuilderX都可以。推荐HbuilderX;3.mysql环境：建议是用5.7版本均可4.硬件环境：windows 7/8/10 1G内存以上；
微服务商城系统（十三）订单、支付流程分析
weixin_41750142的博客
04-14 5216
文章目录一、订单1、用户收件地址查询1、登录页面配置 一、订单 1、用户收件地址查询 订单的前端页面是这样的： 这里，“收件人信息”，是从 user 工程中获取到的，在数据库中对应 tb_address 表：      需要在 user 工程中提供根据用户名查询收件地址的方法。 在 AddressService 中提供方法： List<Address> list(String username); 实现： @Override publ
Java开发实现微信小程序支付（微信支付）
热门推荐
12程序猿的博客
08-30 1万+
目录一、前期准备工作1.申请小程序开发者账号并认证2.小程序开通微信支付3.开发指引4.到官方下载Java的支付SDK二、代码实现1.开发流程：2.实现步骤2.1 下单，生成待支付订单2.2 调用微信统一下单2.3 小程序发起微信支付3.后台业务逻辑涉及到的工具类及参数封装类3.1 WeChatPayDto3.2 WeChatPayUtil：微信支付工具类3.3 WXPayUtil、WxPayNotifyResponse3.4 HttpUtils工具类3.5 ErrorCode：返回码3.6 request
购物车js代码_JS实现购物车商品列表结算功能代码.rar
11-22
这个“购物车js代码_JS实现购物车商品列表结算功能代码.rar”压缩包提供了一套JavaScript实现的购物车系统，旨在帮助开发者快速构建具有这些功能的前端界面。 首先，我们来看“购物车功能”的主要组成部分： 1. **...
用JavaScript做简易的购物车的代码示例
10-19
在本文中，我们将深入探讨如何使用JavaScript实现一个简单的购物车功能。这个购物车示例主要展示了如何使用原生JavaScript处理用户交互，包括选择商品、更改商品数量和删除商品。我们将分析代码结构，解释各个部分的...
js实现手机移动端购物车结算页面特效.zip
11-01
本资源"js实现手机移动端购物车结算页面特效.zip"聚焦于利用JavaScript技术来构建手机移动端的购物车结算页面，旨在提供一种流畅、直观且用户体验良好的结算流程。 首先，我们要理解JavaScript在前端开发中的基础...
jquery购物车结算功能实现方法
10-21
在本教程中，我们将探讨如何使用jQuery实现购物车结算功能，允许用户购买多个商品并进行统一结算。这个功能对于电商网站至关重要，因为它提供了方便的用户体验，让用户能够轻松管理他们的购物选择。 首先，我们需要...
vue实现商城购物车功能
08-28
4. 结算流程，将购物车中的商品传递到结算页面，处理订单创建、支付等操作。 5. 异步通信，通过API接口与后端服务器进行数据交互，如添加商品到购物车、获取商品信息等。 总的来说，Vue.js 提供了一种高效、声明式...
vue-使用Worker实现多标签页共享一个WebSocket
qq_43548590的博客
07-08 1089
最近有一个需求，需要实现用户系统消息时时提醒功能。第一时间就是想用WebSocket进行长连接。但是前端项目点击跳转需要打开新的标签页。这个时间就会出现新的标签页打开会把老的WebSocket连接挤掉。然后就想到了去共享一个WebSocket连接。就能实现多个标签页消息共享了。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 419
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
Webkit简介以及工作流程
最新发布
读心悦
07-10 216
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 173
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
JS混淆基本类型和原理
朴拙科技的博客
07-06 718
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
用web写一个购物车功能
09-25
### 回答1： 要用web写一个购物车功能，你需要考虑以下步骤： 1. 设计购物车页面：在页面上添加...当然，根据具体需求和技术要求，还可以进一步完善和扩展购物车功能，例如处理商品库存、实现更灵活的价格计算等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值