下载地址：https://www.pan38.com/share.php?code=bRtMK 提取码：8888【仅供学习参考用途】
这个教学项目仅模拟基本的账户操作界面，不生成任何真实金融凭证。建议学习正规的前端开发课程，如MDN Web Docs的JavaScript教程。所有数据仅存储在浏览器内存中，刷新页面即重置。
<!DOCTYPE html>
账户余额
ank-app {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
text-align: center;
}
.balance {
font-size: 2em;
margin: 20px 0;
}
button {
padding: 10px 20px;
margin: 0 10px;
}
balance = 0;
function updateBalance() {
document.getElementById('balance').textContent = balance.toFixed(2);
}
function deposit() {
const amount = parseFloat(prompt("请输入存款金额"));
if(!isNaN(amount) && amount > 0) {
balance += amount;
updateBalance();
}
}
function withdraw() {
const amount = parseFloat(prompt("请输入取款金额"));
if(!isNaN(amount) && amount > 0 && amount <= balance) {
balance -= amount;
updateBalance();
}
}
class BankAccount {
constructor(name, accountNumber) {
this.name = name;
this.accountNumber = accountNumber;
this.balance = 0;
this.transactions = [];
}
deposit(amount) {
if (amount <= 0 || isNaN(amount)) return false;
this.balance += amount;
this.transactions.push({
type: '存款',
amount: amount,
date: new Date().toLocaleString()
});
return true;
}
withdraw(amount) {
if (amount <= 0 || isNaN(amount) || amount > this.balance) return false;
this.balance -= amount;
this.transactions.push({
type: '取款',
amount: -amount,
date: new Date().toLocaleString()
});
return true;
}
getFormattedBalance() {
return `¥ ${this.balance.toFixed(2)}`;
}
}
// 初始化账户
const myAccount = new BankAccount('张三', '6225880012345678');
// DOM操作
function updateUI() {
document.getElementById('balance').textContent = myAccount.getFormattedBalance();
document.getElementById('account-name').textContent = myAccount.name;
document.getElementById('account-number').textContent = myAccount.accountNumber.replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, '$1**$3$4');
const transactionsList = document.getElementById('transactions');
transactionsList.innerHTML = '';
myAccount.transactions.slice().reverse().forEach(transaction => {
const li = document.createElement('li');
li.innerHTML = `
<span>${transaction.type}</span>
<span style="color: ${transaction.amount > 0 ? 'green' : 'red'}">
${transaction.amount > 0 ? '+' : ''}${transaction.amount.toFixed(2)}
</span>
<small>${transaction.date}</small>
`;
transactionsList.appendChild(li);
});
}
// 事件监听
document.getElementById('deposit-btn').addEventListener('click', () => {
const amount = parseFloat(prompt('请输入存款金额:'));
if (myAccount.deposit(amount)) {
updateUI();
} else {
alert('存款失败，请输入有效金额');
}
});
document.getElementById('withdraw-btn').addEventListener('click', () => {
const amount = parseFloat(prompt('请输入取款金额:'));
if (myAccount.withdraw(amount)) {
updateUI();
} else {
alert('取款失败，余额不足或金额无效');
}
});
document.getElementById('transfer-btn').addEventListener('click', () => {
alert('转账功能将在后续版本实现');
});
// 初始加载
updateUI();
