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

该案例实现的难点是将商品添加到购物车列表的时候 数量的增加，当购物车有该商品的时候就进行累加操作，没有该商品就赋值为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. 思科IPsecVPN建立

    实验拓扑 实验目标: 1.不配置中间的三个路由器的路由实现router0和router2的vpn隧道 2.PC0能够ping通PC1 实验IP预定: PC0 10.1.1.1/24 PC1 20.1. ...

  2. STP协议-基础

    生成树协议 一 .技术背景一个缺乏冗余性设计的网络:任何一个网络节点出现故障,会造成单链路故障.单设备故障,使整个网络瘫痪. 引入冗余性的同时也引入了二层环路:网络的冗余性增强了,但是却出现了二层环路 ...

  3. 【Python】Python 技巧集锦（长期更新）

    [Basic] 『List Comprehensions』 『Python 中 map(), filter(), reduce() 和 zip() 函数的用法』 『Python 中关于下划线 '_'  ...

  4. unity整理

    1. hashmap实现原理 Dictionary hashtable https://www.cnblogs.com/InCerry/p/10325290.html2. malloc与new3. 循 ...

  5. dendrogram

    https://ww2.mathworks.cn/help/stats/dendrogram.html

  6. HTML学习笔记6----链接

    随笔记录方便自己和同路人查阅. #------------------------------------------------我是可耻的分割线--------------------------- ...

  7. c语言学习--静态函数

    静态函数 #include<stdio.h> //这是静态函数, 静态函数只能在当前文件调用,其他文件下面的函数是没法调用到这个函数的 static void fun1() { print ...

  8. Windows安装MySQL5.7配置

    1.下载对应版本安装包,http://dev.mysql.com/downloads/mysql 2.将安装包解压 3.解压后会发现没有my.ini文件,此版本并不需要手动创建my.ini文件,手动创 ...

  9. abc289g题解

    考虑枚举卖出的物品个数\(i\),把\(b_i\)从大到小排序. 题目的某人会买物品的条件转化为\(b_i\geq p_j-c_j\),这说明卖出的物品的集合是排序后\(b\)的一段前缀,且卖出\(i ...

  10. 1247. 交换字符使得字符串相同 (Medium)

    问题描述 1247. 交换字符使得字符串相同 (Medium) 有两个长度相同的字符串 s1 和 s2,且它们其中 只含有 字符 "x" 和 "y",你需要通过 ...