js实现简单的ATM机

实现ATM机的基本功能

使用JavaScript实现一个简单的ATM机模拟，需要包含以下核心功能：账户余额查询、存款、取款和退出系统。以下是一个基础实现方案。

账户初始化

定义一个账户对象，存储用户的基本信息和余额：

const account = {
  name: "张三",
  cardNumber: "1234567890",
  pin: "1234",
  balance: 5000
};

登录验证

创建登录验证函数，检查卡号和PIN码：

function login(cardNumber, pin) {
  return cardNumber === account.cardNumber && pin === account.pin;
}

余额查询

实现查看余额功能：

function checkBalance() {
  return account.balance;
}

存款操作

处理存款逻辑，更新账户余额：

function deposit(amount) {
  if (amount > 0) {
    account.balance += amount;
    return `存款成功，当前余额：${account.balance}`;
  }
  return "存款金额必须大于0";
}

取款操作

实现取款功能，包含余额检查：

function withdraw(amount) {
  if (amount <= 0) return "取款金额必须大于0";
  if (amount > account.balance) return "余额不足";

  account.balance -= amount;
  return `取款成功，当前余额：${account.balance}`;
}

主界面交互

创建控制台交互界面示例：

function atmInterface() {
  const cardNumber = prompt("请输入卡号：");
  const pin = prompt("请输入PIN码：");

  if (!login(cardNumber, pin)) {
    alert("卡号或密码错误");
    return;
  }

  while (true) {
    const choice = prompt(`请选择操作：
      1. 查询余额
      2. 存款
      3. 取款
      4. 退出`);

    switch(choice) {
      case "1":
        alert(`当前余额：${checkBalance()}`);
        break;
      case "2":
        const depositAmount = parseFloat(prompt("请输入存款金额："));
        alert(deposit(depositAmount));
        break;
      case "3":
        const withdrawAmount = parseFloat(prompt("请输入取款金额："));
        alert(withdraw(withdrawAmount));
        break;
      case "4":
        return;
      default:
        alert("无效选择");
    }
  }
}

安全增强

为提升安全性，可添加以下改进：

let attempts = 0;
const MAX_ATTEMPTS = 3;

function secureLogin(cardNumber, pin) {
  attempts++;
  if (attempts > MAX_ATTEMPTS) {
    alert("尝试次数过多，卡已被锁定");
    return false;
  }
  return login(cardNumber, pin);
}

交易记录

扩展账户对象以记录交易历史：

account.transactions = [];

function addTransaction(type, amount) {
  account.transactions.push({
    date: new Date().toLocaleString(),
    type,
    amount,
    balance: account.balance
  });
}

更新存款和取款函数以记录交易：

function recordedDeposit(amount) {
  const result = deposit(amount);
  if (result.includes("成功")) {
    addTransaction("存款", amount);
  }
  return result;
}

HTML界面版本

创建网页版ATM界面基础结构：

<div id="atm">
  <div id="login">
    <input type="text" id="cardNumber" placeholder="卡号">
    <input type="password" id="pin" placeholder="PIN码">
    <button onclick="handleLogin()">登录</button>
  </div>
  <div id="menu" style="display:none;">
    <button onclick="showBalance()">查询余额</button>
    <button onclick="showDeposit()">存款</button>
    <button onclick="showWithdraw()">取款</button>
    <button onclick="logout()">退出</button>
  </div>
</div>

对应JavaScript控制逻辑：

function handleLogin() {
  const cardNumber = document.getElementById('cardNumber').value;
  const pin = document.getElementById('pin').value;

  if (secureLogin(cardNumber, pin)) {
    document.getElementById('login').style.display = 'none';
    document.getElementById('menu').style.display = 'block';
  }
}

这个实现提供了ATM机的基本功能框架，可根据需要进一步扩展功能如转账、交易记录查询、多账户支持等特性。网页版界面需要补充完整的CSS样式和更多交互细节。