<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易ATM取款机案例</title>
<style>
#atm{
text-align: center;
margin: auto auto;
justify-content: center;
min-height: 50vh;
}
#yinHangKa{
text-align: center;
margin: auto auto;
justify-content: center;
min-height: 50vh;
}
</style>
</head>
<body>
<h2 id="atm" style="background-color: aqua;">简易ATM取款机</h2>
<div style="text-align: center; margin: 0 auto;background-color: antiquewhite;"><button onclick="executeIncidence()">开始</button></div>
<h2 id="yinHangKa" style="background-color: orange;">银行卡余额:<span id="yuE"></span></h2>
<script>
let incidence = 0;
function executeIncidence(){
while(true){
let circumstance = prompt('请输入您要执行的操作')
if (circumstance.includes('存钱')){
incidence += +prompt('请输入您要存入的钱数')
alert(`当前卡内余额${incidence}`)
}
else if(circumstance.includes('取钱')){
incidence -= +prompt('请输入您要取出的钱数')
alert(`当前卡内余额${incidence}`)
}
else{
alert('退出')
break
}
let content = document.querySelector('#yuE')
content.innerHTML = incidence
}
}
</script>
</body>
</html>