Web前端，JS基础之ATM取款机案例

前言

持续学习总结输出中，今天分享的是Web前端，JS基础之ATM取款机案例

需求

用户在ATM取款时可以选择存钱、取钱、查看余额和退出功能

分析

1、循环的时候，需要反复提示输入框，所以提示框写要到循环里面
2、退出的条件是用户输入了 4，如果是4，则结束循环，不再出现弹窗
3、提前准备存储一个金额，默认0，金额是变量，需写在外面
4、存钱则是加法操作，取钱则是减法操作，查看余额则是直接显示金额
5、输入不同金额的值，可以使用switch来执行不同的操作

参考代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ATM取款机案例</title>
</head>
<body><script>// 1. 不断的弹出对话框// 3. 金额的变量let money = 0while (true) {let str = prompt(`请您选择操作:1. 存钱2. 取钱3. 查看余额4. 退出`)// 2. 除非输入的是4 退出循环  breakif (str === '4') {break}// 4. switch 加减操作switch (str) {case '1':let cun = +prompt('请您输入存钱的金额:')// money = money + cun money += cunbreakcase '2':let qu = +prompt('请您输入取钱的金额:')money -= qubreakcase '3':alert(`您卡上的余额是${money}元`)break}}</script>
</body></html>

运行结果：

最后分享一句话：

时间里没有救赎。你无法由未来里解脱。临在是自由之钥。因此，你只能在当下是自由的。
《当下的力量》

本次的分享就到这里了！！！

欢迎在评论区留言讨论！！

Web前端，JS基础之ATM取款机案例相关推荐

web前端js基础之js的几种“截取字符串”方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
web前端-JS（DOM、BOM）
web前端-JS(DOM.BOM) 1. DOM- 操作元素 1.1 获取元素 1.2 事件基础 1.3 操作元素 1.3.1 改变元素的内容 1.3.2 常见元素的属性操作 1.3.3 表单元素的属 ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...
Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
前端JS基础知识复习笔记（1）
珠峰前端JS基础复习笔记(1) 在财务工作中自学了HTML和CSS之后,硬啃了JS高级编程三,实在觉得想要学的透是需要找一位好老师的,于是最近在学习周啸天老师的JS高级编程课,课外需要再补补基础,就回 ...
阿里云视频直播 web前端[移动端] Aliplayer的简单案例
阿里云视频直播 web前端[移动端] Aliplayer的简单案例最近做了一个功能就是播放后台提供的各种直播视频,格式在未确定的情况下,刚开始以为简单的一个video标签就能播放视频,后面才发现各种 ...
web前端-JS入门
web前端-JS入门 1.初识JavaScript 1.1 JavaScript的简单介绍 1.2 JS的三种写法 1.2.1 行内式 1.2.2 内嵌式 1.2.3 外部js 1.3 JS输入输出语 ...
现代前端技术解析：Web前端技术基础
最近几年,越来越多的人投入到前端大军中:时至至今,前端工程师的数量仍然不能满足企业的发展需求:与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作 ...

Web前端，JS基础之ATM取款机案例

前言

需求

分析

参考代码

Web前端，JS基础之ATM取款机案例相关推荐

最新文章

热门文章