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

最新推荐文章于 2023-10-07 03:01:45 发布

soosgo

最新推荐文章于 2023-10-07 03:01:45 发布

阅读量541

点赞数

本文链接：https://blog.csdn.net/doulvme/article/details/130200846

版权

Javascript 同时被 3 个专栏收录

50 篇文章 0 订阅

订阅专栏

ES6

15 篇文章 0 订阅

订阅专栏

Bootstrap

7 篇文章 0 订阅

订阅专栏

一、界面效果

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