【知了堂學習筆記】_JavaScript之DOM操作案例（ATM機）
阿新 • • 發佈：2019-02-02
js操作DOM的小案例——ATM機
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
div{
width: 300px;
height:200px;
margin: 0 auto;
border: 1 ATM機主頁
實現了取款，存款的操作
取款的金額超過餘額，將有錯誤提示，不允許操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
div{
width: 300px;
height:200px;
margin: 0 auto;
border: 1px solid black;
border-radius: 5px;
text-align: center;
}
p{
font-size: 20px;
text-align: left;
}
input{
width: 150px;
height:20px;
}
button{
border: 0px;
padding: 5px;
background-color: green;
color: white;
}
</style>
<body>
<div>
<p><label>餘額：</label><input type="text" id="balance" value="2000.00" disabled="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>
<script>
//輸入的是否為數字
function isNumber(number){
return isNaN(number);
}
//存款操作
function deposit(){
var balance = parseFloat(document.getElementById("balance").value);
var deposit = document.getElementById("deposit").value;
if(!deposit.length>0){
alert("請輸入你要存款的金額..");
return;
}
if(isNumber(deposit)){
alert("請輸入數字！");
return;
}
balance += parseFloat(deposit);
document.getElementById("balance").value = balance;
}
//取款操作
function withDraw(){
var balance = parseFloat(document.getElementById("balance").value);
console.log(typeof balance);
var withdraw =document.getElementById("withdraw").value;
if(!withdraw.length>0){
alert("請輸入你要取款的金額..");
return;
}
if(isNumber(withdraw)){
alert("請輸入數字！");
return;
}
if(parseFloat(withdraw) >balance){
alert("餘額不足請重新輸入！");
return;
}
balance -=withdraw;
document.getElementById("balance").value = balance;
}
</script>