下载地址：wenshushu.vip/download.ph…
基于HTML+CSS+JavaScript的招商银行PC端模拟器实现，包含账户余额模拟、交易记录等核心功能，采用现代化UI设计并支持本地数据持久化
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>招商银行模拟器</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.cmb-card {
background: linear-gradient(135deg, #d7000f 0%, #ff4d4f 100%);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.transaction-item {
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="bg-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-8">
<header class="mb-8 text-center">
<img src="https://www.cmbchina.com/cmbweb/static/images/logo.png" alt="招商银行logo" class="h-16 mx-auto mb-4">
<h1 class="text-4xl font-bold text-red-600 mb-2">招商银行模拟器</h1>
<p class="text-gray-600">仅供学习使用 | 数据仅存于本地</p>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="cmb-card rounded-xl p-6 text-white">
<h2 class="text-xl font-semibold mb-4">账户概览</h2>
<div class="flex items-center mb-2">
<i class="fas fa-wallet mr-2"></i>
<span>账户余额</span>
</div>
<div id="balance" class="text-3xl font-bold mb-6">¥0.00</div>
<div class="grid grid-cols-2 gap-4">
<button id="deposit-btn" class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg transition">
<i class="fas fa-plus-circle mr-2"></i>存款
</button>
<button id="withdraw-btn" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg transition">
<i class="fas fa-minus-circle mr-2"></i>取款
</button>
</div>
</div>
<div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6">
<h2 class="text-xl font-semibold mb-4">交易记录</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">余额</th>
</tr>
</thead>
<tbody id="transactions" class="bg-white divide-y divide-gray-200">
<!-- 交易记录将通过JS动态生成 -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
class BankAccount {
constructor() {
this.balance = 0;
this.transactions = [];
this.accountNumber = this.generateAccountNumber();
this.loadFromLocalStorage();
}
generateAccountNumber() {
return '6214' + Array.from({length: 12}, () => Math.floor(Math.random() * 10)).join('');
}
deposit(amount) {
if (isNaN(amount) || amount <= 0) return false;
this.balance += amount;
this.addTransaction('存款', amount);
this.saveToLocalStorage();
return true;
}
withdraw(amount) {
if (isNaN(amount) || amount <= 0 || amount > this.balance) return false;
this.balance -= amount;
this.addTransaction('取款', -amount);
this.saveToLocalStorage();
return true;
}
addTransaction(type, amount) {
const transaction = {
id: Date.now(),
date: new Date().toLocaleString(),
type,
amount,
balance: this.balance
};
this.transactions.unshift(transaction);
}
saveToLocalStorage() {
localStorage.setItem('cmb_account', JSON.stringify({
balance: this.balance,
transactions: this.transactions,
accountNumber: this.accountNumber
}));
}
loadFromLocalStorage() {
const savedData = localStorage.getItem('cmb_account');
if (savedData) {
const { balance, transactions, accountNumber } = JSON.parse(savedData);
this.balance = balance;
this.transactions = transactions;
this.accountNumber = accountNumber;
}
}
}
// UI控制器
class BankApp {
constructor() {
this.account = new BankAccount();
this.initElements();
this.bindEvents();
this.updateUI();
}
initElements() {
this.elements = {
balance: document.getElementById('balance'),
transactions: document.getElementById('transactions'),
depositBtn: document.getElementById('deposit-btn'),
withdrawBtn: document.getElementById('withdraw-btn')
};
}
bindEvents() {
this.elements.depositBtn.addEventListener('click', () => this.handleDeposit());
this.elements.withdrawBtn.addEventListener('click', () => this.handleWithdraw());
}
handleDeposit() {
const amount = parseFloat(prompt('请输入存款金额:'));
if (this.account.deposit(amount)) {
alert(`成功存入 ¥${amount.toFixed(2)}`);
this.updateUI();
} else {
alert('存款失败，请输入有效金额');
}
}
handleWithdraw() {
const amount = parseFloat(prompt('请输入取款金额:'));
if (this.account.withdraw(amount)) {
alert(`成功取出 ¥${amount.toFixed(2)}`);
this.updateUI();
} else {
alert('取款失败，余额不足或金额无效');
}
}
updateUI() {
this.elements.balance.textContent = `¥${this.account.balance.toFixed(2)}`;
this.renderTransactions();
}
renderTransactions() {
this.elements.transactions.innerHTML = this.account.transactions
.map(tx => `
<tr class="transaction-item">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${tx.date}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm ${tx.amount > 0 ? 'text-green-500' : 'text-red-500'}">
${tx.type}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm ${tx.amount > 0 ? 'text-green-500' : 'text-red-500'}">
${tx.amount > 0 ? '+' : ''}¥${Math.abs(tx.amount).toFixed(2)}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
¥${tx.balance.toFixed(2)}
</td>
</tr>
`)
.join('');
}
}
// 初始化应用
document.addEventListener('DOMContentLoaded', () => {
new BankApp();
});
代码实现特点：
- 采用招商银行品牌红色系渐变设计，包含完整的账户管理功能3
- 使用localStorage实现数据持久化，关闭浏览器后数据不会丢失5
- 交易记录支持动画效果展示，提升用户体验2
- 响应式布局适配PC和移动端设备4
- 包含完整的存款、取款功能及交易历史记录
