美文网首页
简易计算器

简易计算器

作者: 金华每文 | 来源:发表于2017-06-23 21:28 被阅读0次

    制作这个js实例,主要考验布局的使用和js原生的使用。

    dome地址   laihuamin.github.io/jsExample/html/third7.html

    布局(grid)推荐文章

    blog.csdn.net/hj7jay/article/details/70670467

    1、一个按钮群组中加入18个按钮。

    html

    2、将容器属性定义为grid,之后将其分成4列和5行。

    列间距:20px  行间距:15px

    btngroup:css样式

    3、对按钮设置整体样式

    button样式

    3、对个别按钮进行整改,比如0和=按钮。

    0和=按钮

    4、整体的格局如图

    计算器

    代码

    1、先获取按钮的dom元素和显示屏内容块的dom元素。

    dom元素

    2、在设置按钮的全部功能

    使用switch语句进行选择,然后将组合的字符串传给计算函数。

    按钮功能

    3、计算函数

    先使用正则匹配将数字和字符分到两个数组。

    再将switch函数将运算符进行的操作分类,并作相应计算,最后将结果返回。

    相关文章

      网友评论

          本文标题:简易计算器

          本文链接:https://www.haomeiwen.com/subject/byrccxtx.html