atm机实现明细js
ATM 机实现明细的 JavaScript 示例
以下是一个模拟 ATM 机功能的 JavaScript 实现，包含查询交易明细、存款、取款等基本功能。
初始化账户数据
const account = {
name: "张三",
accountNumber: "1234567890",
balance: 5000,
transactions: [
{ type: "deposit", amount: 2000, date: "2023-01-01", balance: 5000 },
{ type: "withdraw", amount: 1000, date: "2023-01-02", balance: 4000 },
{ type: "deposit", amount: 2000, date: "2023-01-03", balance: 6000 }
]
};查询余额功能
function checkBalance() {
return `当前余额: ${account.balance}元`;
}存款功能
function deposit(amount) {
if (amount <= 0) {
return "存款金额必须大于0";
}
account.balance += amount;
const transaction = {
type: "deposit",
amount: amount,
date: new Date().toISOString().split('T')[0],
balance: account.balance
};
account.transactions.push(transaction);
return `存款成功，当前余额: ${account.balance}元`;
}取款功能
function withdraw(amount) {
if (amount <= 0) {
return "取款金额必须大于0";
}
if (amount > account.balance) {
return "余额不足";
}
account.balance -= amount;
const transaction = {
type: "withdraw",
amount: amount,
date: new Date().toISOString().split('T')[0],
balance: account.balance
};
account.transactions.push(transaction);
return `取款成功，当前余额: ${account.balance}元`;
}查询交易明细功能
function getTransactionHistory() {
let history = "交易明细:\n";
account.transactions.forEach(trans => {
history += `${trans.date} ${trans.type === 'deposit' ? '存款' : '取款'}: ${trans.amount}元 余额: ${trans.balance}元\n`;
});
return history;
}使用示例
console.log(checkBalance());
console.log(deposit(1000));
console.log(withdraw(500));
console.log(getTransactionHistory());前端界面整合示例
<!DOCTYPE html>
<html>
<head>
<title>ATM模拟器</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.atm-container { max-width: 500px; margin: 0 auto; }
button { margin: 5px; padding: 8px 15px; }
#output { margin-top: 20px; white-space: pre-line; border: 1px solid #ddd; padding: 10px; min-height: 100px; }
</style>
</head>
<body>
<div class="atm-container">
<h2>ATM模拟器</h2>
<button onclick="output(checkBalance())">查询余额</button>
<button onclick="output(deposit(prompt('请输入存款金额:')))">存款</button>
<button onclick="output(withdraw(prompt('请输入取款金额:')))">取款</button>
<button onclick="output(getTransactionHistory())">交易明细</button>
<div id="output"></div>
</div>
<script>
// 这里插入上面的JavaScript代码
function output(text) {
document.getElementById('output').textContent = text;
}
</script>
</body>
</html>安全考虑
在实际应用中，需要考虑以下安全措施：
- 使用HTTPS协议保护数据传输
- 实现用户身份验证机制
- 对敏感数据进行加密
- 防止CSRF和XSS攻击
- 记录详细的操作日志
扩展功能
可以进一步扩展的功能包括：
- 转账功能
- 密码修改
- 交易分类统计
- 定期存款功能
- 多账户管理
这个示例提供了ATM机的基本功能实现，可以根据实际需求进行扩展和完善。
