超市自助售货机程序开发：满足多种商品、找零和付款方式
根据超市自助售货机的需求，以下是一个简单的示例程序。该程序使用了JavaScript来模拟商品、售货机和买家之间的销售行为。
<!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;
}
</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>
<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;
}
</script>
</body>
</html>
在这个示例中，我们使用了HTML和CSS来设计界面，使用了JavaScript来处理买家和售货机之间的交互。商品数据存储在一个数组中，买家可以通过点击选择商品，并选择购买数量。随着买家选择商品和输入数量，界面会根据选择的商品和数量来计算显示单价和总价。当买家点击付款按钮时，会进行库存检查、更新销量和库存、选择付款方式、计算总价和找零等操作。
请注意，以上示例是一个简单的模拟程序，并没有进行后端交互和数据库存储。在实际应用中，你需要根据需求和实际情况来设计后端的处理和数据库的存储。
希望以上示例能够帮助你按照要求编写超市自助售货机的销售行为，并支持多种商品、找零和多种付款方式。
原文地址: http://www.cveoy.top/t/topic/bw1K 著作权归作者所有。请勿转载和采集!