您的位置：首页 > Web前端 > JavaScript

【知了堂学习笔记】_JavaScript之DOM操作案例（ATM机）

2017-12-08 19:46 651 查看

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

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: 1px solid black;
border-radius: 5px;
text-align: center;
}
p{
font-size: 20px;
}
input{

width: 150px;
height:20px;
}
button{
border: 0px;
padding: 5px;
background-color: green;
color: white;
}

</style>
<body>
<div>
<p>ATM机</p>
<p><label>账号：</label><input type="text" id="account"></p>
<p><label>密码：</label><input type="password" id="passwordatm"></p>
<p onclick="login()"><button >登录</button></p>
</div>
</body>
</html>
<script>
var i=2;//输入的次数
//判断卡号是否位数字
function isNaNAccount(account){
return isNaN(account);
}
//判断输入的卡号和密码是否为空
function isNaNAccountAndPwd(account,passwordatm){
if((account.length>0)&&(passwordatm.length>0)){
return true;
}
return false;
}
//登录事件
function login(){
var account = document.getElementById("account").value;
var passwordatm = document.getElementById("passwordatm").value;
console.log(typeof account);
console.log(passwordatm);
if(isNaNAccount(account)){
alert("卡号必须是数字");
return;
}
if(!(isNaNAccountAndPwd(account,passwordatm))){
alert("卡号和密码都不能为空");
return;
}

if((i>0) && (account=="123456789")&&(passwordatm="123")){
window.location.href="http://127.0.0.1:8020/reviewJS/DOM%E6%93%8D%E4%BD%9C/ATMindex.html?__hbt=1512374587088";
}else{
if(i==0){
alert("你的账号已被锁定！");
return;
}
alert("你还剩"+i+"次机会！");
i--;
return ;
}
}
</script>

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript dom

相关文章推荐

新的分享

章节导航