用JS实现一个简单的购物车小案例
该案例主要是实现的功能有：添加商品功能，将商品添加到购物车的功能还有将商品删除功能，还有就是移出购物车的功能
该案例实现的难点是将商品添加到购物车列表的时候 数量的增加，当购物车有该商品的时候就进行累加操作，没有该商品就赋值为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实现一个简单的购物车小案例的更多相关文章
- 一个简单的Maven小案例
Maven是一个很好的软件项目管理工具,有了Maven我们不用再费劲的去官网上下载Jar包. Maven的官网地址:http://maven.apache.org/download.cgi 要建立一个 ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 使用MongoDB和JSP实现一个简单的购物车系统
目录 1 问题描述 2 解决方案 2.1 实现功能 2.2 最终运行效果图 2.3 系统功能框架示意图 2.4 有关MongoDB简介及系统环境配置 2.5 核心功能代码讲解 ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
- 一个简单的Android小实例
原文:一个简单的Android小实例 一.配置环境 1.下载intellij idea15 2.安装Android SDK,通过Android SDK管理器安装或卸载Android平台 3.安装J ...
- 利用JSP编程技术实现一个简单的购物车程序
实验二 JSP编程 一.实验目的1. 掌握JSP指令的使用方法:2. 掌握JSP动作的使用方法:3. 掌握JSP内置对象的使用方法:4. 掌握JavaBean的编程技术及使用方法:5. 掌握JSP ...
- js实现一个简单钟表动画(javascript+html5 canvas)
第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...
- php+js实现一个简单的用户管理系统
php + js 实现一个简单的用户管理系统 说实话,我对PHP是抵触的,但是我们的WEB课程刚好学的就是这个,不得已看了看,下面是用PHP实现的一个简单的用户管理系统. 我们首先来看一下目录结构 a ...
- JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...
随机推荐
- 增加网络位置CMD脚本
创建.bat脚本 net use Z: \\192.168.X.X\Share /user:用户名 /persistent:YES 密码 persistent:YES是保存密码.下次开机也生效.
- BIP查询框添加查询条件
// 搜索框添加查询条件 viewModel.on("afterMount", function (data) { let agentId = viewModel.getParam ...
- 简单记录五个Linux设置定时任务的步骤（自动化运维必备）
这几天我们国庆节休息,但是作为运维工作的同学们是不是也不能闲着,担心工作中是不是有任务在执行中需要维护.于是,我们很多的运维工作都是用的自动化运维监控,如果有故障都会定时的处理和告警的.这个与我们的L ...
- C# Linq将DataTable中的某列转换成数组或者List
// 获取到的数据 DataTable picDt = GetPdmPoroductModelPictureData(productModelCode); // 将productCode列转数组 st ...
- lxml.etree.XMLSyntaxError: Opening and ending tag mismatch: meta line 4 and head, line 6, column 12 报错分析与解决方案
报错分析: 我们检查代码没有任何问题,但报错显示:开始和结束标记不匹配. html:因为html是超文本标记语言,代码不规范也能解析. python:python是编程语言,代码不规范则解析不了. 解 ...
- DEV GridControl 主从表 (层次表)
DataTable dtData= DbHelperOra.Query(strSql2.ToString()).Tables[0]; //主表 dtusers.TableName = "病人 ...
- lui - imageViewer - 图片查看器
imageViewer - 图片查看器 ImageViewer Table Attributes 参数 说明 类型 可选值 默认值 urlList 图片列表 Array - [] onChange 图 ...
- MySQL利用information_schema库注入
information_schema库简单说就是MySQL里的一个目录库,MySQL是一本书,information_schema库这个存储数据库元数据的库就是书的目录或者索引. 库>表> ...
- js 处理日期加减
js 处理日期加减 开始时间设置为6点整,若当前时间小于6:00:00,则使用T-1,否则使用T 结束时间设置为T+1的6点整 Date.prototype.format = function(fmt ...
- 由浇花工具开始IOT物联网平台之开始前言篇【1】
在2020年时,突然有个想法,就是做个浇花工具,因为平时喜欢养花,有时忘记浇花,有时感觉手动浇花太麻烦,所以做个这个小玩意,是用.NET 开发的WinForm小程序,来控制单片机,带动水泵浇花,还可以 ...