自助售货机程序示例：模拟购物体验
根据您的要求，我将为您提供一个简单的自助售货机程序示例。请注意，这只是一个基本的示例，您可以根据自己的需求进行修改和扩展。
<!DOCTYPE html>
<html>
<head>
<title>自助售货机</title>
<style>
/* CSS 样式代码 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.product {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.product img {
max-width: 100%;
height: auto;
}
.product-name {
font-weight: bold;
margin-bottom: 5px;
}
.product-price {
margin-bottom: 5px;
}
.product-quantity {
margin-bottom: 5px;
}
.actions {
margin-top: 10px;
}
.actions button {
margin-right: 5px;
}
</style>
<script>
// JavaScript 代码
class Product {
constructor(name, price, stock) {
this.name = name;
this.price = price;
this.stock = stock;
this.sold = 0;
}
sell(quantity) {
if (quantity > this.stock) {
alert('库存不足！');
return;
}
this.stock -= quantity;
this.sold += quantity;
}
}
class VendingMachine {
constructor() {
this.products = [];
this.totalSales = 0;
this.paymentMethods = ['现金', '信用卡'];
}
addProduct(product) {
this.products.push(product);
}
sellProduct(productIndex, quantity) {
const product = this.products[productIndex];
if (!product) {
alert('商品不存在！');
return;
}
product.sell(quantity);
this.totalSales += product.price * quantity;
alert('购买成功！');
this.displayProductInfo(productIndex);
}
displayProductInfo(productIndex) {
const product = this.products[productIndex];
if (!product) {
alert('商品不存在！');
return;
}
const details = `
商品名称：${product.name}
单价：${product.price}元
剩余库存：${product.stock}
销量：${product.sold}
`;
alert(details);
}
}
const vendingMachine = new VendingMachine();
const product1 = new Product('商品1', 10, 10);
const product2 = new Product('商品2', 20, 5);
const product3 = new Product('商品3', 15, 8);
vendingMachine.addProduct(product1);
vendingMachine.addProduct(product2);
vendingMachine.addProduct(product3);
function handleProductClick(productIndex) {
const quantity = parseInt(prompt('请输入购买数量：'));
if (isNaN(quantity)) {
alert('请输入有效的数量！');
return;
}
vendingMachine.sellProduct(productIndex, quantity);
}
</script>
</head>
<body>
<h1>自助售货机</h1>
<div class='grid-container'>
<div class='product' onclick='handleProductClick(0)'>
<img src='product1.jpg' alt='商品1'>
<div class='product-name'>商品1</div>
<div class='product-price'>单价：10元</div>
<div class='product-quantity'>库存：10</div>
</div>
<div class='product' onclick='handleProductClick(1)'>
<img src='product2.jpg' alt='商品2'>
<div class='product-name'>商品2</div>
<div class='product-price'>单价：20元</div>
<div class='product-quantity'>库存：5</div>
</div>
<div class='product' onclick='handleProductClick(2)'>
<img src='product3.jpg' alt='商品3'>
<div class='product-name'>商品3</div>
<div class='product-price'>单价：15元</div>
<div class='product-quantity'>库存：8</div>
</div>
</div>
<div class='actions'>
<button onclick='vendingMachine.displayProductInfo(0)'>查看商品1详情</button>
<button onclick='vendingMachine.displayProductInfo(1)'>查看商品2详情</button>
<button onclick='vendingMachine.displayProductInfo(2)'>查看商品3详情</button>
</div>
</body>
</html>
在上述示例中，我们创建了一个Product类表示商品，以及一个VendingMachine类表示售货机。每个商品对象包含名称、单价、库存和销量属性，并提供了销售方法。售货机对象包含商品列表、总销售额和付款方式列表，并提供了添加商品、销售商品和展示商品信息的方法。
通过点击商品图像，可以调用handleProductClick()函数来购买该商品并输入数量。购买成功后，售货机将更新库存和销量，并显示成功购买的商品信息。
对于其他功能，您可以根据自己的需求进行扩展和修改。例如，您可以添加付款和找零的功能，以及支持多种付款方式的选项。您还可以通过使用弹窗或其他布局方式，将界面进行美化和调整。
希望这个示例能帮助您开始编写您的自助售货机程序。请注意，这只是一个简化的示例，实际开发中可能还需要考虑更多的功能和逻辑。
原文地址: https://www.cveoy.top/t/topic/bDUY 著作权归作者所有。请勿转载和采集!