js實現(xiàn)ATM機存取款功能

更新時間：2021年04月19日 14:34:53 作者：wy__kobe

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)ATM機存取款功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

js是一個功能十分強大的腳本語言，通過js能實現(xiàn)很多有意思的demo！而要實現(xiàn)那些功能炫酷、特效美觀的東西DOM操作是必不可少且尤為重要的！這個ATM機存取款的案例，就用到j(luò)s中一些簡單的DOM操作來實現(xiàn)其功能。

ATM機案例功能需求：

1.用戶最多只能有三次輸入卡號和密碼的機會，如果超過三次，則提示卡號已被鎖定
2.用戶取款的金額不能大于卡上的賬戶余額
3.存取功能完成后，要更新相應(yīng)的余額信息

登錄界面代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ATM</title>
 <script src="ATM.js"></script>
 <style>
 div{
 width: 300px;
 height: 200px;
 margin: 0 auto;
 border:1px solid black;
 border-radius: 5px;
 text-align: center;
 }
 p {
 font-size: 20px;
 }
 button {
 border: 0px;
 padding: 5px;
 background-color: green;
 color: white;
 }
 </style>
</head>
<body>
 <div>
 <p>ATM機</p>
 <p><label>卡號：</label><input type="text" id="account"></p>
 <p><label>密碼：</label><input type="password" id="password"></p>
 <p><button onclick="login()">登錄</button></p>
 </div>
</body>
</html>

主頁界面代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ATM</title>
 <script src="ATM.js"></script>
 <style>
 div{
 width: 300px;
 height: 200px;
 margin: 0 auto;
 border:1px solid black;
 border-radius: 5px;
 text-align: center;
 }
 p {
 font-size: 20px;
 }
 button {
 border: 0px;
 padding: 5px;
 background-color: green;
 color: white;
 }
 </style>
</head>
<body>
 <div>
 <p>ATM機</p>
 <p><label>余額：</label><input type="text" id="balance" value="2000.00" disabled></p>
 <p><label>存款：</label><input type="text" id="deposit">&nbsp;<button onclick="deposit()">存款</button></p>
 <p><label>取款：</label><input type="text" id="withdraw">&nbsp;<button onclick="withdraw()">取款</button></p>
 
 </div>
</body>
</html>

js代碼：

var i = 2; //定義密碼輸錯的次數(shù)

//判斷輸入的卡號是不是數(shù)字類型
//返回true，證明不是數(shù)字；返回false，證明是數(shù)字

 function checkNumber(account){
 var pattern=/^[0-9]*[1-9][0-9]*$/;
 return pattern.test(account);
 // return isNaN(account);
 }

//判斷輸入的卡號和密碼是否為空
 function checkNull(account,password){
 if(account.length>0 && password.length>0){
 return true;
 }
 return false;
 }

//登錄事件
 function login(){
 var account=document.getElementById("account").value;
 var password=document.getElementById("password").value;

 if(!checkNull(account,password)){
 alert("卡號和密碼不能為空!");
 return; //終止登錄方法，下面的代碼不會執(zhí)行
 }
 if(!checkNumber(account)){
 alert("卡號必須為數(shù)字！");
 return;
 }
 if(i>0 && account=="123456789" && password=="123"){
 window.location.href="index.html" rel="external nofollow" ;
 }else{
 if(i == 0){
 alert("當(dāng)前卡號被鎖定！");
 return;
 }
 alert("你還剩下"+i+"次輸入卡號和密碼的機會");
 i--;
 return;
 }
 }

//存款
 function deposit(){
 var balance = parseFloat(document.getElementById("balance").value); //獲取余額，并將其轉(zhuǎn)換為數(shù)字
 var deposit = document.getElementById("deposit").value;

 if(!deposit.length>0){
 alert("請輸入您要存款的金額");
 return;
 }
 if(checkNumber(deposit)){
 alert("請輸入數(shù)字");
 return;
 }

 balance+=parseFloat(deposit);
 document.getElementById("balance").value=balance; //修改存款完成以后顯示的余額

 }

 //取款
 function withdraw(){
 var balance = parseFloat(document.getElementById("balance").value); //獲取余額，并將其轉(zhuǎn)換為數(shù)字
 var withdraw = document.getElementById("withdraw").value;

 if(!withdraw.length>0){
 alert("請輸入您要取款的金額");
 return;
 }
 if(checkNumber(withdraw)){
 alert("請輸入數(shù)字");
 return;
 }

 //判斷取款是否大于余額
 if(parseFloat(withdraw)>balance){
 alert("余額不足！");
 }

 balance-=parseFloat(withdraw);
 document.getElementById("balance").value=balance;
 }

運行效果：