作为一名前端开发者，我经常会遇到实现简单功能的需求，其中一项就是制作一个JavaScript简易ATM取款机。在这篇文章中，我将分享如何用JavaScript实现一个ATM取款机，并讲解代码中的关键点。

实现ATM取款机的关键是要通过JavaScript实现以下功能：

1.输入密码并进行验证；

2.根据用户输入的金额进行取款；

3.显示余额。

首先，我们需要在HTML中创建一个界面，其中包括输入密码和金额的输入框以及确认和取消按钮。

HTML

 
 请输入密码：
 
 


 
 请输入取款金额：
 
 


 
 确认
 
 取消

我的余额为：10000元

接下来，我们需要用JavaScript来实现ATM取款机的功能。首先是密码验证：

Script
let pwdInput = document.getElementById("pwd-input");
let confirmBtn = document.getElementById("confirm-btn");
let cancelBtn = document.getElementById("cancel-btn");
let alertMsg = document.getElementById("alert-msg");
let balanceNum = document.getElementById("balance-num");
let balance = 10000; // 初始余额
confirmBtn.addEventListener("click", function() {
 let pwd = pwdInput.value;
 if (pwd !== "123456")
  alertMsg.textContent = "密码不正确";
  return;
 
 let amount = parseInt(amountInput.value);
 if (isNaN(amount) || amount <= 0)
  alertMsg.textContent = "请输入正确的取款金额";
  return;
 
 if (amount > balance)
  alertMsg.textContent = "余额不足";
  return;
 
 balance -= amount;
 balanceNum.textContent = balance;
 alertMsg.textContent = "取款成功";
});
cancelBtn.addEventListener("click", function()
 pwdInput.value = "";
 amountInput.value = "";
 alertMsg.textContent = "";
);

在这段代码中，我首先通过getElementById获取了页面上的各个元素，并初始化了余额。当用户点击确认按钮时，首先判断输入的密码是否正确，如果不正确则提示密码错误；接着判断输入的取款金额是否正确，如果不正确则提示输入正确的取款金额；最后判断余额是否足够支付取款金额，如果不够则提示余额不足。如果所有判断都通过，则进行取款操作，更新余额，并提示取款成功。当用户点击取消按钮时，则清空输入框和提示信息。

通过这个简单的ATM取款机案例，我希望能帮助大家了解JavaScript的基本语法和DOM操作，并巩固JavaScript的基础知识。

相似文章

友情链接
• 网站定制开发
• 帮你发
• 小蓄群站获客
• 雅圣洁家政