js實現ATM機存取款功能

2019-11-19 12:11:48

字體：大中小

來源：轉載

供稿：網友

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

ATM機案例功能需求：

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

登錄界面代碼：

<!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"> <button onclick="deposit()">存款</button></p> <p><label>取款：</label><input type="text" id="withdraw"> <button onclick="withdraw()">取款</button></p>  </div></body></html>

js代碼：

var i = 2; //定義密碼輸錯的次數//判斷輸入的卡號是不是數字類型//返回true，證明不是數字；返回false，證明是數字 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; //終止登錄方法，下面的代碼不會執行 } if(!checkNumber(account)){ alert("卡號必須為數字！"); return; } if(i>0 && account=="123456789" && password=="123"){ window.location.href="index.html" rel="external nofollow" ; }else{ if(i == 0){ alert("當前卡號被鎖定！"); return; } alert("你還剩下"+i+"次輸入卡號和密碼的機會"); i--; return; } }//存款 function deposit(){ var balance = parseFloat(document.getElementById("balance").value); //獲取余額，并將其轉換為數字 var deposit = document.getElementById("deposit").value; if(!deposit.length>0){ alert("請輸入您要存款的金額"); return; } if(checkNumber(deposit)){ alert("請輸入數字"); return; } balance+=parseFloat(deposit); document.getElementById("balance").value=balance; //修改存款完成以后顯示的余額 } //取款 function withdraw(){ var balance = parseFloat(document.getElementById("balance").value); //獲取余額，并將其轉換為數字 var withdraw = document.getElementById("withdraw").value; if(!withdraw.length>0){ alert("請輸入您要取款的金額"); return; } if(checkNumber(withdraw)){ alert("請輸入數字"); return; } //判斷取款是否大于余額 if(parseFloat(withdraw)>balance){ alert("余額不足！"); } balance-=parseFloat(withdraw); document.getElementById("balance").value=balance; }

運行效果：

在這里插入圖片描述