学习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；然后按钮操作逐个进行判断，源代码如下：

<!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>