用hbuilderx,1、编写一个收银柜台收款程序,根据商品单价、购买数量以及收款金额计算并输出应收金额和找零。
时间: 2024-01-21 07:18:26 浏览: 145
CalcChange:分配1-用户输入硬币,程序输出美元找零金额
好的,这里提供一个简单的收银程序示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>收银程序</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
text-align: center;
}
form {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
form label {
flex-basis: 100%;
margin-bottom: 10px;
font-weight: bold;
}
form input {
flex-basis: 100%;
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
outline: none;
font-size: 16px;
}
form button {
flex-basis: 100%;
margin-top: 20px;
padding: 8px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
form button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="container">
<h1>收银程序</h1>
<form>
<label>单价(元)</label>
<input type="number" id="price" step="0.01" required>
<label>数量</label>
<input type="number" id="quantity" required>
<label>收款金额(元)</label>
<input type="number" id="payment" step="0.01" required>
<button type="submit" onclick="calculate(event)">计算</button>
</form>
<p id="result"></p>
</div>
<script type="text/javascript">
function calculate(event) {
event.preventDefault(); // 阻止表单默认提交
var price = parseFloat(document.querySelector("#price").value);
var quantity = parseInt(document.querySelector("#quantity").value);
var payment = parseFloat(document.querySelector("#payment").value);
var total = price * quantity;
var change = payment - total;
if (change >= 0) {
document.querySelector("#result").innerHTML = "应收金额:" + total.toFixed(2) + " 元,找零:" + change.toFixed(2) + " 元。";
} else {
document.querySelector("#result").innerHTML = "收款金额不足!";
}
}
</script>
</body>
</html>
```
这个程序使用了 HTML、CSS 和 JavaScript 进行编写,可以在 HBuilderX 中新建一个 HTML 文件,然后将上述代码复制进去并保存,最后在浏览器中打开这个 HTML 文件,就可以看到一个简单的收银程序了。
这个程序包括一个表单,用户可以输入商品单价、购买数量和收款金额,然后点击“计算”按钮进行计算。程序会根据输入的数值计算出应收金额和找零,并在页面上输出结果。如果收款金额不足,则会提示“收款金额不足!”。
阅读全文