javaScript基础之Dom操作--ATM机案例

一、案例描述：
1.登录：要求用户输入卡号和密码。三次之内可以重复输入，如果三次输入错误，则退出系统
2.登录成功后，显示主界面。要求用户输入所需操作，然后调用相应的函数，实现操作。
3.存款：要求用户输入存款金额，完成存款操作
4.取款：如果超支，不允许取款，并给予提示

二、案例效果图：

三、涉及到的知识点：
1.javaScript中Dom操作的基本使用
2.获取Dom节点的内容

四、文件构成：
1.ATM案例_登录.html
2.ATM_主界面.html
3.ATM.css
4.ATM.js

五、ATM.js文件内容
1.checkNumber(account)：传入卡号用于检查输入是的卡号是否是数字
2.checkNull(account,password)：检查卡号和密码是否为空
3.saveMoney()：存款操作，获取余额和要存入的金额，然后检查存款是否是数字，无误后相加后显示
4.getMoney()：取款操作，获取余额以及要取款的金额，比对取款的金额是否大于余额以及是否是数字是否为空等
5.login()：登录操作，比对卡号和密码是否为空，是否是数字，是否正确，以及记录登录次数，错误两次后将不能再登录

六、ATM.js源码
var i=2;//定义密码输错的次数

//判断输入的卡号是不是数字类型
//返回true，证明不是数字类型
//返回false，证明是数字类型
function checkNumber(account){
return isNaN(account);
}

//判断输入的卡号和密码是否为空
function checkNull(account,password){
if(account.length>0&&password.length>0){
return true;
}else{
return false;
}
}

//登录事件
function login(){
var account=document.getElementById(“cardId”).value;
var password=document.getElementById(“password”).value;
if(checkNull(account,password)==false){
alert(“卡号和密码都不能为空”);
return;//终止登录函数,下面的代码不会再运行
}
if(checkNumber(account)){
alert(“卡号必须是数字”);
return;
}

	if(i>0&&account=="123456789"&&password==123){
		window.location.href="ATM_主界面.html";
	}else{
		if(i==0){//三次输入密码的机会已经用完
			alert("你现有的卡号已经锁定");
			return;
		}
		alert("你还剩下"+i+"次输入卡号和密码的机会");
		i--;
		return;
	}

}

//存款操作
function saveMoney(){
var blance=parseFloat(document.getElementById(“blance”).value);//得到余额
var saveNumber=document.getElementById(“saveMoney”).value;//得到存款的金额
if(!saveNumber.length>0){
alert(“请输入你存款的金额”);
return;
}

if(checkNumber(saveNumber)==true){
	alert("请输入数字");
	return;
}
blance+=parseFloat(saveNumber);
document.getElementById("blance").value=blance;

}

//取款金额
function getMoney(){
var blance=parseFloat(document.getElementById(“blance”).value);//得到余额
var getNumber=document.getElementById(“getMoney”).value;//获取取款金额
if(!getNumber.length>0){
alert(“请输入你取款的金额”);
return;
}

if(checkNumber(getNumber)==true){
	alert("请输入数字");
	return;
}

if(parseFloat(getNumber)>blance){
	alert("请小于余额的数字");
	return;
}

blance-=parseFloat(getNumber);
document.getElementById("blance").value=blance;

}

ps：
1.获取input标签的内容用document.getElementById(“xxx”).value
2.注意函数中return后什么也没有代表直接退出函数
3.isNaN()的使用，返回true代表是非数值，返回false代表是数值