一、界面效果
这里主要是实现一个类似于购物车的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;
}