用HTML5,js设计一个网页,实现对给定数额的工资,进行发放,根据100元面值,50元面值,20元面值,十元面值,五元面值,一元面值,实现发放票数最少
时间: 2024-09-27 19:02:13 浏览: 27
在HTML5和JavaScript中创建一个简单的网页实现工资发放功能,我们可以设计一个交互式的表格或者使用简单的div结构配合计算函数。这里是一个基础的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>工资发放</title>
<style>
.button {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>请输入工资总额:</h2>
<input type="number" id="salaryInput" placeholder="请输入金额">
<br>
<table border="1">
<tr>
<th>面额</th>
<th>张数</th>
</tr>
<tr>
<td>100元</td>
<td><input type="number" id="hundredBtn" value="0"></td>
</tr>
<tr>
<td>50元</td>
<td><input type="number" id="fiftyBtn" value="0"></td>
</tr>
<tr>
<td>20元</td>
<td><input type="number" id="twentyBtn" value="0"></td>
</tr>
<tr>
<td>10元</td>
<td><input type="number" id="tenBtn" value="0"></td>
</tr>
<tr>
<td>5元</td>
<td><input type="number" id="fiveBtn" value="0"></td>
</tr>
<tr>
<td>1元</td>
<td><input type="number" id="oneBtn" value="0"></td>
</tr>
</table>
<button onclick="calculateLeastCoins()">发放</button>
<script>
function calculateLeastCoins() {
const salary = document.getElementById('salaryInput').value;
const coins = [
{ denomination: '100', amount: 100 },
{ denomination: '50', amount: 50 },
{ denomination: '20', amount: 20 },
{ denomination: '10', amount: 10 },
{ denomination: '5', amount: 5 },
{ denomination: '1', amount: 1 }
];
let totalCoins = 0;
let remainingSalary = salary;
for (const coin of coins) {
let numCoins = Math.floor(remainingSalary / coin.amount);
totalCoins += numCoins;
remainingSalary -= numCoins * coin.amount;
document.getElementById(`${coin.denomination}Btn`).value = numCoins;
}
if (remainingSalary === 0) {
alert("发放完成,最少需要 " + totalCoins + " 张钞票");
} else {
alert("无法完全用指定面额的钞票发放,剩余 " + remainingSalary + " 元");
}
}
</script>
</body>
</html>
```
在这个示例中,用户输入工资总额,然后点击“发放”按钮,会计算出使用各面值钞票最少的数量,并显示在相应的输入框里。如果余额为零,则表示已全部发放;若余额不为零,则说明某些面额不足以覆盖。
阅读全文