当前位置：首页 > JavaScript

js实现简单的ATM机

2026-04-04 23:31:15JavaScript

实现功能需求

ATM机需要包含以下基本功能：用户登录验证、查询余额、存款、取款、退出系统。采用JavaScript实现一个控制台或网页交互的模拟程序。

数据结构设计

使用对象存储用户账户信息，例如：

const accounts = [
  { id: '123456', pin: '7890', balance: 1000 },
  { id: '654321', pin: '0987', balance: 500 }
];

登录验证模块

创建函数验证用户输入的卡号和PIN码：

function authenticate(id, pin) {
  return accounts.find(acc => acc.id === id && acc.pin === pin);
}

余额查询模块

通过账户对象直接返回当前余额：

function checkBalance(account) {
  return account.balance;
}

存款操作模块

验证存款金额后更新余额：

function deposit(account, amount) {
  if (amount > 0) {
    account.balance += amount;
    return true;
  }
  return false;
}

取款操作模块

检查余额是否充足后执行操作：

function withdraw(account, amount) {
  if (amount > 0 && amount <= account.balance) {
    account.balance -= amount;
    return true;
  }
  return false;
}

主流程控制

使用循环和条件语句构建交互逻辑（示例为控制台版）：

let currentAccount = null;
while (true) {
  const choice = prompt('选择操作: 1-登录 2-查询 3-存款 4-取款 5-退出');

  switch(choice) {
    case '1':
      const id = prompt('输入卡号');
      const pin = prompt('输入PIN码');
      currentAccount = authenticate(id, pin);
      break;
    // 其他case处理剩余功能...
    case '5':
      process.exit();
  }
}

网页版实现要点

若需网页版本，可采用以下方式：

<div id="atm">
  <input type="text" id="cardInput" placeholder="卡号">
  <button onclick="handleLogin()">登录</button>
  <div id="operationPanel" style="display:none;">
    <!-- 功能按钮和显示区域 -->
  </div>
</div>

通过DOM操作显示/隐藏界面元素，使用事件监听处理用户交互。

安全增强建议

实际应用中应增加：

输入尝试次数限制
密码掩码显示
交易记录存储
后端服务验证（纯前端实现仅为演示）

完整示例结构

建议将代码模块化为：

js实现简单的ATM机

class ATM {
  constructor(accounts) {
    this.accounts = accounts;
    this.currentAccount = null;
  }

  // 各功能方法...
}

const atm = new ATM(accounts);
atm.start();