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

先给大家看一下效果

Video_2022-08-01_214421

首先：第一步：搭建框架

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

第三步：添加变量

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

现在开始代码演示

首先：第一步：搭建框架


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>

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


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‘，起到换行的效果

第三步：添加变量


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>

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


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.存款条件


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.添加条件


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.添加条件


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.取款条件


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.添加取款条件


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.查看余额


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.退出


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


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，需要的可以私信

相关阅读:
基于YOLOV8模型和CCPD数据集的车牌目标检测系统（PyTorch+Pyside6+YOLOv8模型）
【C++入门基础】命名空间 | 缺省参数 | 函数重载 | 引用 | 内联函数
NR slot配置
3.快速上手
史上最简单：SpringCloud 集成 mybatis-plus（以若依微服务版本为例）
【软考软件评测师】第二十八章计算机网络（网络设备网络地址）
2023年考PMP证书有什么意义？
什么是同相比例运算放大电路
Django重定向类HttpResponseRedirect、HttpResponsePermanentRedirect和重定向函数redirect
【EI会议征稿】2024年遥感技术与测量测绘国际学术会议（RSTSM 2024）

原文地址：https://blog.csdn.net/tea_tea_/article/details/126111224