js是一個功能十分強(qiáng)大的腳本語言，通過js能實現(xiàn)很多有意思的demo！而要實現(xiàn)那些功能炫酷、特效美觀的東西DOM操作是必不可少且尤為重要的！這個ATM機(jī)存取款的案例，就用到j(luò)s中一些簡單的DOM操作來實現(xiàn)其功能。
ATM機(jī)案例功能需求：
1.用戶最多只能有三次輸入卡號和密碼的機(jī)會，如果超過三次，則提示卡號已被鎖定
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機(jī)</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機(jī)</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; //定義密碼輸錯的次數(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+"次輸入卡號和密碼的機(jī)會"); 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; }
新聞熱點
疑難解答
圖片精選
