• 日期: 2026-07-01
  • 标签: 常规

为了添加补货和修改商品单价功能，需要对代码进行一些修改和扩展。以下是修改后的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>超市自助售货机</title>
  <style>
    /* CSS样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    
    h1 {
      margin-bottom: 20px;
    }
    
    .container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 20px;
    }
    
    .product {
      border: 1px solid #ddd;
      padding: 20px;
      text-align: center;
    }
    
    .product img {
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
    }
    
    .product button {
      margin-top: 10px;
      padding: 5px 10px;
      font-size: 14px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
    
    .product button:hover {
      background-color: #45a049;
    }
    
    .buyer {
      margin-top: 20px;
      text-align: center;
    }
    
    .buyer label {
      display: block;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .buyer input[type='number'] {
      width: 100%;
      padding: 5px;
      font-size: 14px;
    }
    
    .buyer button {
      margin-top: 10px;
      padding: 5px 10px;
      font-size: 14px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
    
    .buyer button:hover {
      background-color: #45a049;
    }
    
    .admin {
      margin-top: 20px;
      text-align: center;
    }
    
    .admin label {
      display: block;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .admin input[type='text'],
    .admin input[type='number'] {
      width: 100%;
      padding: 5px;
      font-size: 14px;
    }
    
    .admin button {
      margin-top: 10px;
      padding: 5px 10px;
      font-size: 14px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
    
    .admin button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h1>超市自助售货机</h1>
  <div class='container'>
    <div class='product'>
      <img src='product1.jpg' alt='商品1'>
      <h2>商品1</h2>
      <p>单价：$10</p>
      <p>存量：10</p>
      <p>销量：0</p>
      <button onclick='selectProduct(1)'>选择</button>
    </div>

    <div class='product'>
      <img src='product2.jpg' alt='商品2'>
      <h2>商品2</h2>
      <p>单价：$12</p>
      <p>存量：8</p>
      <p>销量：0</p>
      <button onclick='selectProduct(2)'>选择</button>
    </div>

    <div class='product'>
      <img src='product3.jpg' alt='商品3'>
      <h2>商品3</h2>
      <p>单价：$15</p>
      <p>存量：5</p>
      <p>销量：0</p>
      <button onclick='selectProduct(3)'>选择</button>
    </div>
  </div>

  <div class='buyer'>
    <h2>买家</h2>
    <label for='quantity'>数量：</label>
    <input type='number' id='quantity'>
    <p>单价：<span id='unitPrice'>$0</span></p>
    <p>总价：<span id='totalPrice'>$0</span></p>
    <button onclick='checkout()'>付款</button>
  </div>

  <div class='admin'>
    <h2>管理员</h2>
    <label for='replenish-product-id'>商品编号：</label>
    <input type='number' id='replenish-product-id'>
    <label for='replenish-quantity'>补货数量：</label>
    <input type='number' id='replenish-quantity'>
    <button onclick='replenish()'>补货</button>
    <label for='update-product-id'>商品编号：</label>
    <input type='number' id='update-product-id'>
    <label for='update-price'>新单价：</label>
    <input type='number' id='update-price'>
    <button onclick='updatePrice()'>修改单价</button>
  </div>

  <script>
    // JavaScript代码
    var products = [
      { id: 1, name: '商品1', price: 10, stock: 10, sold: 0 },
      { id: 2, name: '商品2', price: 12, stock: 8, sold: 0 },
      { id: 3, name: '商品3', price: 15, stock: 5, sold: 0 }
    ];
    var selectedProduct = null;

    function selectProduct(productId) {
      selectedProduct = products.find(function(product) {
        return product.id === productId;
      });
      document.getElementById('unitPrice').textContent = '$' + selectedProduct.price;
      updateTotalPrice();
    }

    function updateTotalPrice() {
      var quantity = document.getElementById('quantity').value;
      var totalPrice = quantity * selectedProduct.price;
      document.getElementById('totalPrice').textContent = '$' + totalPrice;
    }

    function checkout() {
      var quantity = parseInt(document.getElementById('quantity').value);
      // 检查库存是否充足
      if (quantity > selectedProduct.stock) {
        alert('库存不足');
        return;
      }
      // 更新商品的销量和库存
      selectedProduct.sold += quantity;
      selectedProduct.stock -= quantity;
      // 进行付款
      var paymentMethod = prompt('请选择付款方式：现金、信用卡、支付宝等');
      // 计算总价
      var totalPrice = quantity * selectedProduct.price;
      // 计算找零
      var change = prompt('请输入付款金额：') - totalPrice;
      alert('找零：' + change.toFixed(2));
      // 更新界面
      document.getElementById('quantity').value = '';
      document.getElementById('unitPrice').textContent = '$0';
      document.getElementById('totalPrice').textContent = '$0';
      selectedProduct = null;
    }

    function replenish() {
      var productId = parseInt(document.getElementById('replenish-product-id').value);
      var quantity = parseInt(document.getElementById('replenish-quantity').value);
      var product = products.find(function(product) {
        return product.id === productId;
      });
      if (product) {
        product.stock += quantity;
        alert('商品' + product.name + '补货成功，现存量为' + product.stock);
      } else {
        alert('商品编号不存在');
      }
      document.getElementById('replenish-product-id').value = '';
      document.getElementById('replenish-quantity').value = '';
    }

    function updatePrice() {
      var productId = parseInt(document.getElementById('update-product-id').value);
      var price = parseInt(document.getElementById('update-price').value);
      var product = products.find(function(product) {
        return product.id === productId;
      });
      if (product) {
        product.price = price;
        alert('商品' + product.name + '单价修改成功，现单价为$' + product.price);
      } else {
        alert('商品编号不存在');
      }
      document.getElementById('update-product-id').value = '';
      document.getElementById('update-price').value = '';
    }
  </script>
</body>
</html>

在这个修改后的示例中，我们添加了一个管理员的部分，可以用来进行补货和修改商品单价的操作。管理员可以输入商品编号和补货数量，点击补货按钮来增加商品库存。管理员也可以输入商品编号和新单价，点击修改单价按钮来修改商品的单价。

请注意，以上示例仅为了展示补货和修改商品单价的功能，并没有进行后端交互和数据库存储。在实际应用中，你需要根据需求和实际情况来设计后端的处理和数据库的存储。

希望以上示例能够帮助你添加补货和修改商品单价功能，并对超市自助售货机的程序有所启发。

超市自助售货机：添加补货和修改商品单价功能

原文地址: https://www.cveoy.top/t/topic/bx4N 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录