用js实现ATM机存取款功能

最新推荐文章于 2024-07-10 20:23:57 发布

wy__kobe

最新推荐文章于 2024-07-10 20:23:57 发布

阅读量8k

点赞数 9

分类专栏： js

本文链接：https://blog.csdn.net/wy__kobe/article/details/83991450

版权

js 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

js是一个功能十分强大的脚本语言，通过js能实现很多有意思的demo！而要实现那些功能炫酷、特效美观的东西DOM操作是必不可少且尤为重要的！这个ATM机存取款的案例，就用到js中一些简单的DOM操作来实现其功能。

ATM机案例功能需求：

用户最多只能有三次输入卡号和密码的机会，如果超过三次，则提示卡号已被锁定
用户取款的金额不能大于卡上的账户余额
存取功能完成后，要更新相应的余额信息

登录界面代码：

<!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机</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机</p>
		<p><label>余额：</label><input type="text" id="balance" value="2000.00" disabled></p>
		<p><label>存款：</label><input type="text" id="deposit">&nbsp;<button onclick="deposit()">存款</button></p>
		<p><label>取款：</label><input type="text" id="withdraw">&nbsp;<button onclick="withdraw()">取款</button></p>
		
	</div>
</body>
</html>

js代码：

var i = 2; //定义密码输错的次数

//判断输入的卡号是不是数字类型
//返回true，证明不是数字；返回false，证明是数字

 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; //终止登录方法，下面的代码不会执行
 	}
 	if(!checkNumber(account)){
 		alert("卡号必须为数字！");
 		return;
 	}
 	if(i>0 && account=="123456789" && password=="123"){
 		window.location.href="index.html";
 	}else{
 		if(i == 0){
 			alert("当前卡号被锁定！");
 			return;
 		}
 		alert("你还剩下"+i+"次输入卡号和密码的机会");
 		i--;
 		return;
 	}
 }

//存款
 function deposit(){
 	var balance = parseFloat(document.getElementById("balance").value); //获取余额，并将其转换为数字
 	var deposit = document.getElementById("deposit").value;

 	if(!deposit.length>0){
 		alert("请输入您要存款的金额");
 		return;
 	}
 	if(checkNumber(deposit)){
 		alert("请输入数字");
 		return;
 	}

 	balance+=parseFloat(deposit);
 	document.getElementById("balance").value=balance;  //修改存款完成以后显示的余额

 }

 //取款
 function withdraw(){
 	var balance = parseFloat(document.getElementById("balance").value); //获取余额，并将其转换为数字
 	var withdraw = document.getElementById("withdraw").value;

 	if(!withdraw.length>0){
 		alert("请输入您要取款的金额");
 		return;
 	}
 	if(checkNumber(withdraw)){
 		alert("请输入数字");
 		return;
 	}

 	//判断取款是否大于余额
 	if(parseFloat(withdraw)>balance){
 		alert("余额不足！");
 	}

 	balance-=parseFloat(withdraw);
 	document.getElementById("balance").value=balance;
 }