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

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

时间：2023-06-05 18:18:24

先给大家看一下效果

Video_-08-01_214421

首先：第一步：搭建框架

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

第三步：添加变量

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

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

1.存款条件

1.添加条件

2.添加条件

2.取款条件

1.添加取款条件

3.查看余额

4.退出

5.for循环简述

现在开始代码演示

首先：第一步：搭建框架

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

第三步：添加变量

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

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

1.存款条件

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

1.添加条件

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

2.添加条件

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

2.取款条件

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

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.退出') * 1var 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.查看余额

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

4.退出

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

5.for循环简述

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