這篇文章將為大家詳細講解有關js如何實現ATM機存取款功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
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;
}運行效果：
關于“js如何實現ATM機存取款功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
