该案例主要是实现的功能有：添加商品功能，将商品添加到购物车的功能还有将商品删除功能，还有就是移出购物车的功能

该案例实现的难点是将商品添加到购物车列表的时候 数量的增加，当购物车有该商品的时候就进行累加操作，没有该商品就赋值为1.

上代码：

<!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>

</head>

<style>

    * {

        padding: 0;

        margin: 0;

    }

    ul>li{

        margin-top: 20px;

        list-style: none;

        display: flex;

        flex-direction: row;

        justify-content: space-around;

    }

    ul>li>div{

        width: 120px;

    }

    ul>li>div>a{

        width: 50px;

    }

    .box {

        width: 900px;

        margin: 0 auto;

        border: 1px solid #ccc;

        background-color: skyblue;

    }

</style>

<body>

    <div class="box">

        商品名:<input type="text" placeholder="请输入商品" class="addGoods">

        价格:<input type="number" class="addGoods">

        描述:<textarea class="addGoods"></textarea>

        图片:<input type="text" placeholder="请输入图片" class="addGoods">

        <button id="save">添加商品</button>

        <ul id="goodList">

            <li>

                <div>id</div>

                <div>商品名</div>

                <div>价格</div>

                <div>描述</div>

                <div>图片</div>

                <div>操作</div>

            </li>

        </ul>

        <table id="carTB" border="1px">

            <tr>

                <th>商品名</th>

                <th>价格</th>

                <th>描述</th>

                <th>图片地址</th>

                <th>数量</th>

                <th>操作</th>

            </tr>

        </table>

    </div>

    <script>

        var saveBtn=document.getElementById("save")

        var goodsController=document.querySelectorAll('.addGoods')

        var goods=[]

        var car=[]

        saveBtn.onclick=function(){

            var goodName=goodsController[0].value

            var price=goodsController[1].value

            var info=goodsController[2].value

            var image=goodsController[3].value

            var id=Date.now()

            goods.push({

                goodName,price,info,image,id

            })

            addToGood(goodName,price,info,image,id)

            goodName = goodsController[0].value=''

            price = goodsController[1].value=''

            info = goodsController[2].value=''

            image = goodsController[3].value=''

        }

        var goodList=document.getElementById('goodList')

        function addToGood(goodName,price,info,image,id){

            goodList.innerHTML+=`

            <li>

                <div>${id}</div>

                <div>${goodName}</div>

                <div>${price}</div>

                <div>${info}</div>

                <div>${image}</div>

                <div>

                    <a href="javascript:;" onclick='addToCar(${id})'>加入购物车</a>

                    <a href="javascript:;" onclick='rmCar(${id},goods)'>删除</a>

                    </div>

            </li>

            `

        }

        function addToCar(id){

            var currentGood={}

            for(var good of goods){

                if(good.id==id){

                    currentGood=good

                    break

                }

            }

            var flag=false

            for(var index in car){

                if(car[index].id==currentGood.id){

                    flag=index

                }

            }

            if(flag||flag===0){

                car[flag].count++

                document.querySelectorAll('.count')[flag].innerHTML=car[flag].count

            }else{

                currentGood.count=1

                car.push(currentGood)

                randerToTable(currentGood)

            }  

        }

        var tb=document.querySelector('#carTB')

        function randerToTable(good){

            var keys=['goodName','price','info','image','count']

            var row=tb.insertRow(-1)

            for(var i=0;i<6;i++){

                var cell=row.insertCell(i)

                if(i==5){

                    cell.innerHTML=`<button onclick='rmCar(${good.id},car)'>移除购物车</button>`

                }else{

                    cell.innerHTML=good[keys[i]]

                }

                if(i==4){

                    cell.className='count'

                }

            }

        }

        function rmCar(id,arr){

            event.target.parentElement.parentElement.remove()

            var rmIndex

            for(var index in arr){

                if(arr[index]==id){

                    rmIndex=index

                    break

                }

            }

            arr.splice(rmIndex,1)

        }

    </script>

</body>

</html>

效果图为下

用JS实现一个简单的购物车小案例的更多相关文章

  1. 一个简单的Maven小案例

    Maven是一个很好的软件项目管理工具,有了Maven我们不用再费劲的去官网上下载Jar包. Maven的官网地址:http://maven.apache.org/download.cgi 要建立一个 ...

  2. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  3. 使用MongoDB和JSP实现一个简单的购物车系统

    目录 1 问题描述  2 解决方案  2.1  实现功能  2.2  最终运行效果图  2.3  系统功能框架示意图  2.4  有关MongoDB简介及系统环境配置  2.5  核心功能代码讲解  ...

  4. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  5. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  6. 一个简单的Android小实例

    原文:一个简单的Android小实例 一.配置环境 1.下载intellij idea15 2.安装Android SDK,通过Android SDK管理器安装或卸载Android平台   3.安装J ...

  7. 利用JSP编程技术实现一个简单的购物车程序

    实验二   JSP编程 一.实验目的1. 掌握JSP指令的使用方法:2. 掌握JSP动作的使用方法:3. 掌握JSP内置对象的使用方法:4. 掌握JavaBean的编程技术及使用方法:5. 掌握JSP ...

  8. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  9. php+js实现一个简单的用户管理系统

    php + js 实现一个简单的用户管理系统 说实话,我对PHP是抵触的,但是我们的WEB课程刚好学的就是这个,不得已看了看,下面是用PHP实现的一个简单的用户管理系统. 我们首先来看一下目录结构 a ...

  10. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

随机推荐

  1. 如何获取android环境自带的jar包

    首先找到你需要用到的类,Ctrl 并点击跳转到这个类 跳转过来之后,找到这个类所在的包 Ctrl并点击,此时会跳转到这个包所在的jar的位置 右键class.jar并选择在文件资源浏览器打开 打开以后 ...

  2. 全国分乡镇第七次人口普查数据shp数据库省市区县街道

    全国分乡镇第七次人口普查数据shp数据库省市区县街道 ==名称:全国第七次人口普查任意十个乡镇的乡镇界地图==数据说明:精确到乡镇级别.==数据:面数据,属性列表(乡镇名.乡镇代码,第六次人口普查分乡 ...

  3. sap IUT240 Contract Accounts Receivable and Payable pdf

    sap IUT240 Contract Accounts Receivable and Payable  pdf sap IUT240 Contract Accounts Receivable and ...

  4. xlwings.copy两种用法和匹配超链接

    第一种复制整个sheet页,不能覆盖同名sheet,需先删除.name新sheet也名称 after复制后的位置wb.sheets('增量机会-体外刷新导入').copy(name='快照版本(勿动) ...

  5. Centos8——Nginx下载安装 & 部署项目

    Centos8--Nginx下载安装 & 部署项目 官网:http://nginx.org/ 官网下载:http://nginx.org/en/download.html 创建文件夹 ps: ...

  6. Net6 托管服务、FluentValidation

    Net6 托管服务.FluentValidation 托管服务 1.场景,代码运行在后台.比如服务器启动的时候在后台预先加载数据到缓存,每天凌晨3点把数据导出到备份数据库,每隔5秒钟在两张表之间同步一 ...

  7. 遍历List＜Map＜String,Object＞＞集合

    import java.util.*; public class HelloWorld { public static void main(String []args) { //定义一个List< ...

  8. ubuntu 20.04 基于kubeadm部署kubernetes 1.22.4集群—报错解决

    一.添加node节点,报错1 注:可以提前在各node节点上修改好(无报错无需执行此项) yang@node2:~$ sudo kubeadm join 192.168.1.101:6443 --to ...

  9. win10任务栏图标设置“不合并标签但隐藏文字”

    设置如图不分组即可,下载链接 https://files-cdn.cnblogs.com/files/slyuan/7tt_setup.rar

  10. ZSTUOJ刷题12:Problem B.--深入浅出学算法007-统计求和

    Problem B: 深入浅出学算法007-统计求和 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 6782  Solved: 3693 Descript ...