WEB前端教程：带界面交互的简单计算器
测试你对变量、数字、操作符、字符串和数组等 Javascript 基本概念的理解程度。
课程目标
测试你对变量、数字、操作符、字符串和数组等 Javascript 基本概念的理解程度。 通过制作一个简易计算器，学习 JavaScript 数据类型，MATH 对象，事件等相关知识，熟悉 DOM 的基本操作
阅读学习
- W3School JS 教程(opens new window)
- MDN JavaScript 中的基础数学 — 数字和操作符(opens new window)
- W3School 数字(opens new window)
- W3School 数字方法(opens new window)
- MDN 变量(opens new window)
- undefined 与 null 的区别(opens new window)
- JavaScript 中值类型和引用类型的区别(opens new window)
- Math(opens new window)
编码
参考示例图 (opens new window),利用 HTML+CSS+JAvaScript，实现一个具备带界面交互，具备简单加减乘除的简易计算器
- 界面包括数字 0 到 9 的按钮，其中 1 到 9 排列成九宫格，1 到 3 在最下方，7 到 9 在最上方，0 放在数字 2 的下方
- 界面包含一个小数点输入按钮，位置在数字 0 的左方
- 界面包括加减乘除及等号五个按钮
- 界面包含一个清零的按钮，点击后之前输入全部清除,位置在数字 0 的右方
- 界面包括一个显示当前输入或运算结果的显示屏
- 操作规则和日常家用简易计算机一样，只支持两个数字的加减乘除，操作路径为：按第一个数字，按运算符号，按第二个数字，按等号或其它运算符号时显示运算结果
- 当表达式出现错误表达，比如除数出现 0 时，显示 ERR
- 不允许借助任何第三方组件库实现
进阶任务
如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。
提交
把你今天觉得做得最好的代码放在 Github 后进行提交。
总结
依然把今天的学习用时，收获，问题进行记录。
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-10-27 10:11
- 阅读 ( 640 )
- 分类：WEB前端开发
