一、界面效果

这里主要是实现一个类似于购物车的todolist的界面效果，主要包括原始数组内容的读取、添加以及删除操作，其次就是针对每个物品还可以在数量上进行增加和减小操作，以及最后计算总金额等操作。

界面效果如下：

二、程序源码

界面源代码

界面是使用bootstrap搭建而成的，代码如下：

<!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>品牌列表案例</title><link rel="stylesheet" href="./lib/bootstrap.css"><link rel="stylesheet" href="./css/brandlist.css"><script src="lib/list.js"></script></head><body><div id="app"><!-- 卡片区域 --><div class="card"><div class="card-header">添加商品</div><div class="card-body"><!-- 添加品牌的表单区域 --><!-- form 表单元素有 submit 事件 --><form><div class="form-row align-items-center"><div class="col-auto col-2"><div class="input-group mb-2"><div class="input-group-prepend"><div class="input-group-text">商品名称</div></div><input type="text" class="form-control" id="brandName" placeholder="请输入品牌名称" required></div></div><div class="col-auto col-2"><div class="input-group mb-2"><div class="input-group-prepend"><div class="input-group-text">数量</div></div><input type="number" min="0" id="addNum" class="form-control" placeholder="请输数量" required></div></div><div class="col-auto col-2"><div class="input-group mb-2"><div class="input-group-prepend"><div class="input-group-text">单价￥</div></div><input type="number" step="0.01" min="0" id="addPrice" class="form-control" placeholder="请输入单价" required></div></div><div class="col-auto"><button type="button" class="btn btn-primary mb-2" onclick="addItem()">添加</button></div></div></form></div></div><!-- 表格区域 --><table class="table table-bordered table-hover table-striped"><thead><tr><th scope="col"><div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" id="cb0" checked="checked"><label class="custom-control-label" for="cb0">全选</label></div></th><th scope="col">序号</th><th scope="col">品牌名称</th><th scope="col">数量</th><th scope="col">单价</th><th scope="col">总价</th><th scope="col">创建时间</th><th scope="col">操作</th></tr></thead><tbody id="tbody"></tbody></table><h4>总金额：<span class="text-danger">￥<span id="totalMoney">0.00</span></span></h4></div></body></html>

js代码

通过js对数据进行操作，代码如下

window.onload=function(){//初始化//循环显示列表showList();//显示总金额totalMoneyFn();
}
//原始列表数组
let arr=[{checked:true,name:"迪奥999",num:3,price:330,shijian:"2023-01-11 08:30:00"},{checked:false,name:"兰蔻196",num:1,price:320,shijian:"2023-01-11 08:30:00"}];
//显示列表
function showList(){let str="";for (let i=0;i<arr.length;i++) {str+=`<tr><td><div class="custom-control custom-switch" ><input type="checkbox" class="custom-control-input" onclick="switchTab(${i})" id="cb${i+1}" ${arr[i].checked?'checked':''}><label class="custom-control-label" for="cb${i+1}"> ${arr[i].checked?'已选':'未选'}</label></div></td><td>${i+1}</td><td>${arr[i].name}</td><td>${arr[i].num}</td><td>￥${arr[i].price}</td><td>￥${arr[i].num*arr[i].price}</td><td>${arr[i].shijian}</td><td><a href="javascript:;" onclick="add(${i})">✚</a><a href="javascript:;"  onclick="minus(${i})">▬</a><a href="javascript:;" onclick="deleteItem(${i})">✖</a></td></tr>`;   }let tbody=document.getElementById("tbody");tbody.innerHTML=str;
}
//增加
function add(idx){arr[idx].num++;showList();totalMoneyFn();
}
//减少
function minus(idx){if(arr[idx].num>0){arr[idx].num--;}else{arr[idx].num=0;// arr[idx].checked=false;alert("不能在减了o(╥﹏╥)o")}showList();totalMoneyFn();
}
//删除
function deleteItem(idx){arr.splice(idx,1);showList();totalMoneyFn();
}
//总金额
function totalMoneyFn(){let total=arr.reduce((prev,item)=>{if(item.checked){prev+=item.num*item.price}return prev;},0)document.getElementById("totalMoney").innerHTML=total.toFixed(2);
}
//切换是否选中
function switchTab(idx){console.log(this.innerHTML);arr[idx].checked=!arr[idx].checked;totalMoneyFn();
}
//添加项目
function addItem(){let brandName=document.getElementById("brandName").value;let addNum=document.getElementById("addNum").value;let addPrice=document.getElementById("addPrice").value;arr.push({checked:false,name:brandName,num:addNum,price:addPrice,shijian:nowTime()})showList();
}
//当前时间
function nowTime(){let date=new Date();let year=date.getFullYear();let month=date.getMonth()+1;let day=date.getDate();let h=date.getHours();let m=date.getMinutes();let s=date.getSeconds();let datetime=year+"-"+buqi(month)+"-"+buqi(day)+" "+buqi(h)+":"+buqi(m)+":"+buqi(s);return datetime;
}
//补齐两位
function buqi(num){return num<10?"0"+num:num;
}

js对数组进行操作实现购物车效果相关推荐

js截取数组的操作 - Kaiqisan
js截取数组的操作 hey みんなさんこんにちはKaiqisanと申します.一つの学生プログラマーである-,今天来讲一下截取数组的操作.由于我在项目的实践中总是会用到这个方法但是经常会忘记这些方法的时 ...
js中数组的操作 push()，pop()，shift()，unshift() 简介
JS中的数组提供了四个操作,以便让我们实现队列与堆栈! 小理论: 队列:先进先出堆栈:后进先出实现队列的方法: shift:从集合中把第一个元素删除,并返回这个元素的值. unshift: 在集合 ...
js 对象数组常用操作我用到的
1.删除一个元素 arr.splice(arr.findIndex(v => v.key === 'demokey'),1); 2.根据某个字段就行排序 function compare(p) ...
[Js]删除数组指定元素
写在前面在最近的项目中,有用到js对数组的操作,之前自己几乎没有用到这种方法,这里就记录一下,算是对学到的东西的一种总结吧. 数组对象splice方法 splice() 方法向/从数组中添加/删除项 ...
Js常用数组常用API
JS对数组进行操作的常用API JS中提供了非常多的对数组进行操作的API,这里给出一些个人用到的API,仅供参考. 能够对原数组进行修改的API共有7个: shift,pop , unshift,p ...
json对象、字符串-数组和数学对象中的相关方法、BOM对象、JS中的DOM操作
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 json对象字符串对象的相关方法获取字符串长度 length 清除两侧的空白 trim [ python的strip ] ...
前端：JS/20/数组（数组的概念，数组元素，数组索引，数组元素的访问，数组的长度，数组的创建方法，数组的操作，实例：使用数组保存个人信息，实例：求数组所有值的平均值，数组对象的length属性）
数组 1,数组的概念一组值(或对象)的集合,称为"数组": var arr =[10,20,30,50]; var arr =["张三","男&qu ...
js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip
js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip push()函数用于向当前数组的添加一个或多个元素,并返回新的数组长度.新的元素将会 ...
【转载】js数组的操作
js数组的操作用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一 ...

js对数组进行操作实现购物车效果

一、界面效果

二、程序源码

界面源代码

js代码

js对数组进行操作实现购物车效果相关推荐

最新文章

热门文章