page contents

WEB前端教程:带界面交互的简单计算器

测试你对变量、数字、操作符、字符串和数组等 Javascript 基本概念的理解程度。

attachments-2022-10-0BD6bbcV6359e8c9585a4.png课程目标

测试你对变量、数字、操作符、字符串和数组等 Javascript 基本概念的理解程度。 通过制作一个简易计算器,学习 JavaScript 数据类型,MATH 对象,事件等相关知识,熟悉 DOM 的基本操作

 阅读学习

 编码

参考示例图 (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电子书、教程、项目接单、源码等等

attachments-2022-10-4n1Zh7zk6359e88406526.jpg

0 条评论

请先 登录 后评论
小柒
小柒

1478 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1478 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章