先给大家看一下效果

Video_2022-08-01_214421

首先：第一步：搭建框架

第二步：分析，我们要如何才能知道用户进行了什么操作，是存钱还是取钱等，所以第一步我们需要先来让程序知道我们输入的是什么操作

第三步：添加变量

第四步：我们添加一个变量，作用是给初始余额

现在开始代码演示

首先：第一步：搭建框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=0">
		<title></title>
	</head>
	<body>
		<script>
		


		</script>
	</body>
</html>

第二步：分析，我们要如何才能知道用户进行了什么操作，是存钱还是取钱等，所以第一步我们需要先来让程序知道我们输入的是什么操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=0">
		<title></title>
	</head>
	<body>
		<script>
			var sum = prompt('请输入你想进行的操作' + '\n' + '1.存款' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出') * 1
		
		





		</script>
	</body>
</html>

这里添加了一个‘\n‘，起到换行的效果

第三步：添加变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=0">
		<title></title>
	</head>
	<body>
		<script>
			var sum = prompt('请输入你想进行的操作' + '\n' + '1.存款' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出') * 1
			var a1 = 1;
			var a2 = 2;
			var a3 = 3;
			var a4 = 4;
			








		</script>
	</body>
</html>

第四步：我们添加一个变量，作用是给初始余额

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=0">
		<title></title>
	</head>
	<body>
		<script>
			var sum = prompt('请输入你想进行的操作' + '\n' + '1.存款' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出') * 1
			var a1 = 1;
			var a2 = 2;
			var a3 = 3;
			var a4 = 4;
			var ck = 100000;
			






		</script>
	</body>
</html>

第五步：开始添加判断条件

1.存款条件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=0">
		<title></title>
	</head>
	<body>
		<script>
			var sum = prompt('请输入你想进行的操作' + '\n' + '1.存款' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出') * 1
			var a1 = 1;
			var a2 = 2;
			var a3 = 3;
			var a4 = 4;
			var ck = 100000;
			for (var i = sum; i <=i; i++) {
				if (sum == 1) {
					
				}







	
		</script>
	</body>
</html>

这里我们使用if来判断，判断当用户存款时，程序进行相应操作

1.添加条件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=0">
		<title></title>
	</head>
	<body>
		<script>
			var sum = prompt('请输入你想进行的操作' + '\n' + '1.存款' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出') * 1
			var a1 = 1;
			var a2 = 2;
			var a3 = 3;
			var a4 = 4;
			var ck = 100000;
			for (var i = sum; i <= i; i++) {
				if (sum == 1) {
					var money = prompt('请输入你想存入的金额')
					money = Number(money);
					
				}








		</script>
	</body>
</html>

这里我们写上当用户存款时，定义一个变量，弹出让用户存款多少的输入框，并记得转换数据类型哦

2.添加条件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=0">
		<title></title>
	</head>
	<body>
		<script>
			var sum = prompt('请输入你想进行的操作' + '\n' + '1.存款' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出') * 1
			var a1 = 1;
			var a2 = 2;
			var a3 = 3;
			var a4 = 4;
			var ck = 100000;
			for (var i = sum; i <= i; i++) {
				if (sum == 1) {
					var money = prompt('请输入你想存入的金额')
					money = Number(money);
					ck += money;
					alert('你的余额为' + ck)

				} 
		</script>
	</body>
</html>

这样的话，到目前为止，存款的程序就写好了。接下来我们写取款

2.取款条件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=0">
		<title></title>
	</head>
	<body>
		<script>
			var sum = prompt('请输入你想进行的操作' + '\n' + '1.存款' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出') * 1
			var a1 = 1;
			var a2 = 2;
			var a3 = 3;
			var a4 = 4;
			var ck = 100000;
			for (var i = sum; i <= i; i++) {
				if (sum == 1) {
					var money = prompt('请输入你想存入的金额')
					money = Number(money);
					ck += money;
					alert('你的余额为' + ck)

				} else if (sum == 2) {
					var moneytwo = prompt('请输入你想取出的金额');
					moneytwo = Number(moneytwo)
					
				}
		</script>
	</body>
</html>

同样当用户进行取款操作，程序识别到后，我们定义一个变量让用户输入取多少，然后用现在的余额减去取款金额后在输出

1.添加取款条件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=0">
		<title></title>
	</head>
	<body>
		<script>
			var sum = prompt('请输入你想进行的操作' + '\n' + '1.存款' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出') * 1
			var a1 = 1;
			var a2 = 2;
			var a3 = 3;
			var a4 = 4;
			var ck = 100000;
			for (var i = sum; i <= 999; i++) {
				if (sum == 1) {
					var money = prompt('请输入你想存入的金额')
					money = Number(money);
					ck += money;
					alert('你的余额为' + ck)

				} else if (sum == 2) {
					var moneytwo = prompt('请输入你想取出的金额');
					moneytwo = Number(moneytwo)
					ck = ck - moneytwo;
					alert('你的余额为' + ck);

				} 
		</script>
	</body>
</html>

3.查看余额

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=0">
		<title></title>
	</head>
	<body>
		<script>
			var sum = prompt('请输入你想进行的操作' + '\n' + '1.存款' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出') * 1
			var a1 = 1;
			var a2 = 2;
			var a3 = 3;
			var a4 = 4;
			var ck = 100000;
			for (var i = sum; i <= 999; i++) {
				if (sum == 1) {
					var money = prompt('请输入你想存入的金额')
					money = Number(money);
					ck += money;
					alert('你的余额为' + ck)

				} else if (sum == 2) {
					var moneytwo = prompt('请输入你想取出的金额');
					moneytwo = Number(moneytwo)
					ck = ck - moneytwo;
					alert('你的余额为' + ck);

				} else if (sum == 3) {
					alert('你的余额为' + ck);

				}
		</script>
	</body>
</html>

查看余额的话就很简单了，直接输出一下变量ck就行

4.退出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=0">
		<title></title>
	</head>
	<body>
		<script>
			var sum = prompt('请输入你想进行的操作' + '\n' + '1.存款' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出') * 1
			var a1 = 1;
			var a2 = 2;
			var a3 = 3;
			var a4 = 4;
			var ck = 100000;
			for (var i = sum; i <= 999; i++) {
				if (sum == 1) {
					var money = prompt('请输入你想存入的金额')
					money = Number(money);
					ck += money;
					alert('你的余额为' + ck)

				} else if (sum == 2) {
					var moneytwo = prompt('请输入你想取出的金额');
					moneytwo = Number(moneytwo)
					ck = ck - moneytwo;
					alert('你的余额为' + ck);

				} else if (sum == 3) {
					alert('你的余额为' + ck);

				} else if (sum == 4) {
					break;
				} else {
					alert('暂无此项业务');

				}
			
			}









		
		</script>
	</body>
</html>

退出的话，这里要用到一个之前提到过的break关键字，让其退出此次循环

5.for循环简述

这里我在一开始用了一个for循环，至于效果则是反复执行，如果只有if，那么用户进行一次操作后，程序就结束了，用户刷新再来就数据就被重置了，那样就没有意义，因此我们要利用循环的特性让其反复执行，至于为什么i<=i，是因为i等于sum，也就是用户输入的数字，所以无论什么时候结果都是true，但我们要在if的最后添加一个让用户继续进行操作的代码，不然会因i++，出bug

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=0">
		<title></title>
	</head>
	<body>
		<script>
			var sum = prompt('请输入你想进行的操作' + '\n' + '1.存款' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出') * 1
			var a1 = 1;
			var a2 = 2;
			var a3 = 3;
			var a4 = 4;
			var ck = 100000;
			for (var i = sum; i <= 999; i++) {
				if (sum == 1) {
					var money = prompt('请输入你想存入的金额')
					money = Number(money);
					ck += money;
					alert('你的余额为' + ck)

				} else if (sum == 2) {
					var moneytwo = prompt('请输入你想取出的金额');
					moneytwo = Number(moneytwo)
					ck = ck - moneytwo;
					alert('你的余额为' + ck);

				} else if (sum == 3) {
					alert('你的余额为' + ck);

				} else if (sum == 4) {
					break;
				} else {
					alert('暂无此项业务');

				}
				var sum = prompt('请输入你想进行的操作' + '\n' + '1.存款' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出') * 1
			}









		</script>
	</body>
</html>

这样的话，视频中的效果就全部完成了，方法有很多，还可以用while，需要的可以私信

在JavaScript中利用代码来实现ATM的效果，具有存钱，取钱，查看余额，退出功能

首先：第一步：搭建框架

第二步：分析，我们要如何才能知道用户进行了什么操作，是存钱还是取钱等，所以第一步我们需要先来让程序知道我们输入的是什么操作

第三步：添加变量

第四步：我们添加一个变量，作用是给初始余额

第五步：开始添加判断条件

1.存款条件

1.添加条件

2.添加条件

2.取款条件

1.添加取款条件

3.查看余额

4.退出

5.for循环简述

猜你喜欢