学习javascript，实现一个简易售卖机的功能

有同学提问，说想实现一个JS售卖机的功能，我觉得这个挺有意思的，正是初学者学习JS，锻炼软件开发思维的一个好题目，所以就实现了一下，希望可以有帮助。

1 需求分析

2 开发实现

2.1 商家端录入

2.2 用户端实现

3 建议改进

1 需求分析

需求是这样子的：完成一个自动售货机，至少有3个商品，每个商品都有价格和数量，每购买一次商品，数量会减1，余额也会减少。当余额小于商品的价格时，会提示“余额不足，无法购买商品”；当数量为0如果用户继续购买时，会提示“商品已售完，无法购买”。

通过需求，我们可以分析出以下实现步骤：

商家端实现步骤

可以自主录入，录入商品名称、商品单价、商品初始数量；
录入完成后，有按钮，点击按钮保存商品；
保存商品后，需要展示自己已经录入过商品信息；
录入结束，就可以跳转到用户界面去售卖了；

用户端实现步骤

展示商家页面录入的商品，展示为列表
列表元素，展示信息包括商品名称、商品单价、剩余数量以及购买按钮
用户默认初始余额为0,；
做简单点，这个页面可以为用户充值，并展示充值金额；
当用户购买商品时，需要判断余额大于购买商品的单价并且商品数量大于0，则用户余额减去商品单价，并且商品剩余数量减1；
当用户余额小于购买商品单价时，提示“余额不足，无法购买该商品”；
当用户购买商品数量等于0时，提示“该商品已售完，无法购买”

2 开发实现

2.1 商家端录入

因为商家端录入的数据，要和用户端跨页面通信数据，所以我们把录入的信息存入localStorage中，源码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商家录入</title>
<style></style>
</head>
<body><p><b>商品录入</b></p><div><label>商品名称：</label><input type="text" id="name" /></div><div><label>商品金额：</label><input type="number" id="money" /></div><div><label>商品数量：</label><input type="number" id="number" /></div><button onclick="enterProduct()">录入</button><br/><p><b>已录入商品展示：</b></p><div id="productList"></div><button onclick="go2Sell()">开始售卖</button><script>var productList = [];function enterProduct() {var name = document.getElementById('name').value;var money = document.getElementById('money').value;var number = document.getElementById('number').value;var productShowDom = document.getElementById('productList');productList.push({name,money,number});localStorage.setItem('product', JSON.stringify(productList));// 展示已录入商品var proShowArr = [], proShowStr = '';for (var i=0;i<productList.length;i++) {proShowArr.push('<div>');proShowArr.push(`${i+1} ${productList[i]['name']} ￥${productList[i]['money']} ${productList[i]['number']}`);proShowArr.push('</div>');}proShowStr = proShowArr.join('');productShowDom.innerHTML = proShowStr;}function go2Sell() {if (productList.length === 0) {alert('请录入商品后再进行售卖');return;}}</script>
</body>
</html>

2.2 用户端实现

首先从localStorage获取数据，展示为列表，初始化展示用户余额为0；然后按钮操作逐个进行判断，源代码如下：

javascript"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户购买</title>
<style>#productListBox {margin: 100px;margin-bottom: 20px;display: flex;width: 800px;}#productListBox div {margin-left: 50px;width: 200px;border: 1px solid #CCC;}.recharge {margin-left: 150px;}
</style>
</head>
<body><div id="productListBox"></div><p class="recharge"><input type="number" id="balanceInput" /><button onclick="rechMoney()">充值</button></p><p class="recharge">余额：￥<span id="balance"></span></p><script>var balanceDom = document.getElementById('balance');balanceDom.innerText = 0;function showProductList() {var productDom = document.getElementById('productListBox');var proData = localStorage.getItem('product');proData = JSON.parse(proData);var proShowArr = [], proShowStr = '';for (var i=0;i<proData.length;i++) {proShowArr.push('<div>');proShowArr.push(`<p>${proData[i]['name']}</p>`);proShowArr.push(`<p>售价：${proData[i]['money']}</p>`);proShowArr.push(`<p>剩余：${proData[i]['number']}</p>`);proShowArr.push(`<button onclick=buy(${i})>购买</button>`);proShowArr.push('</div>');}proShowStr = proShowArr.join('');productDom.innerHTML = proShowStr;}showProductList();function rechMoney() {var rechMoneyVal = document.getElementById('balanceInput').value;var balanceDom = document.getElementById('balance');balanceDom.innerText = rechMoneyVal;document.getElementById('balanceInput').value = '';}function buy(index) {var proData = localStorage.getItem('product');proData = JSON.parse(proData);if (Number(proData[index]['number']) <= 0) {alert('该商品已售完，无法购买');return;}var balanceDom = document.getElementById('balance');if (Number(balanceDom.innerText) < Number(proData[index]['money'])) {alert('余额不足，无法购买该商品');return;}var newBalance = Number(balanceDom.innerText) - Number(proData[index]['money']);balanceDom.innerText = newBalance;var productItemNum = Number(proData[index]['number']);productItemNum--;proData[index]['number'] = productItemNum;localStorage.setItem('product', JSON.stringify(proData));showProductList();}</script>
</body>
</html>