• javascript从0到0.9手写一个windows计算器

            说实话，最初想用javascript模拟着windows的计算器写一个的时候，感觉也就是10分钟搞定，但写着写着发现，其实并不是那么容易的事，window的这个计算器逻辑挺多的。

            而且还想给别人把这个思路说出来，那就更加的不容易了。

            这个window的计算器呢，简直是颠覆了我们小学的那点知识，我们总认为计算嘛， 1 + 1 = 2 , 必须得有第一个加数，再有一个加数，2个数相加才能等于一个数，但windows计算器可以不点击第二个加数，直接往下加。

            难倒是不难，但对于初学者来说 +=  赋值  显示内容 最终值累算这些内容都是要学的。

            希望本文可以以一个废话多，代码清晰，逻辑通顺的角度帮助大家。

            如果能够帮到一些人，那将会是我莫大的欣慰。

    代码开始前 ，跟我做：

    》》》》 windows徽标键 + R  ，会出现一个运行小窗口

     》》》》  输入框内输入 calc   然后出现了计算器

     太复杂的今天不做啊，今天只做0 - 9的数字 加  减  乘  除  清空  等于 

    目录

    一、HTML布局

    1、包含的内容

    2、html中的元素布局

    二、CSS样式控制

    三、计算器需求预备

    1、计算器的乱套的逻辑

    2、逻辑分析

    3、初始化代码

    3、按钮点击事件循环

    四、计算过程

    1、存储和显示第一个数字

    2、点击加号的逻辑

    3、存储和显示第2个数字

    4、等号的逻辑

    5、其他符号

    一、HTML布局

    1、包含的内容

            根据计算器的按键分布，包含 7 8 9 4 5 6 1 2 3 0  然后有一个C表示清空，有 + - × ÷ =  5个操作按钮

            顶部包含显示屏，第一行显示一直计算的数值，

            第二行表示当前按下的数值，当按下 = 的时候，第二行显示屏有会显示当前计算的结果值

    2、html中的元素布局

            id为valueDom1 的 div元素，用来做为顶部第一行显示屏，表示计算过程

            id为valueDom2 的 div元素，用来做为顶部第二行显示屏，表示当前点击数值，也表示点击等号后的运算结果

    1. <div class="count-box">
    2.    <div class="count-runing" id="valueDom1">div>
    3.    <div class="count-current" id="valueDom2">div>
    4.    <div class="count-btns">
    5.       <div>7div>
    6.       <div>8div>
    7.       <div>9div>
    8.       <div>+div>
    9.       <div>4div>
    10.       <div>5div>
    11.       <div>6div>
    12.       <div>-div>
    13.       <div>1div>
    14.       <div>2div>
    15.       <div>3div>
    16.       <div>×div>
    17.       <div>0div>
    18.       <div class="clear">Cdiv>
    19.       <div class="equal">=div>
    20.       <div>÷div>
    21.    div>
    22. div>

            

    二、CSS样式控制

    1. <style>
    2.     html, body, * {
    3.        margin: 0;
    4.        padding: 0;
    5.     }
    6.     .count-box {
    7.        margin: 100px;
    8.        width: 289px;
    9.        height: 280px;
    10.        background: #CCC;
    11.     }
    12.     .count-runing {
    13.        height: 36px;
    14.        line-height: 36px;
    15.        text-align: right;
    16.        font-size: 16px;
    17.     }
    18.     .count-current {
    19.        height: 36px;
    20.        line-height: 36px;
    21.        text-align: right;
    22.        font-size: 24px;
    23.     }
    24.     .count-btns {
    25.        background: #FFF;
    26.        display: flex;
    27.        flex-wrap: wrap;
    28.     }
    29.     .count-btns div {
    30.        width: 70px;
    31.        height: 50px;
    32.        border: 1px solid #CCC;
    33.        cursor: pointer;
    34.        text-align: center;
    35.        line-height: 50px;
    36.     }
    37.     .clear {
    38.        background: blue;
    39.     }
    40.     .equal {
    41.         background: red;
    42.     }
    43. style>

       到这一步，可以看到一个简单的计算器雏形了。

    三、计算器需求预备

    1、计算器的乱套的逻辑

            按照windows显示器一起点一点，体验一下需求

            △  初始化显示0

            △ 点数字，会显示到第二行显示屏（我们在上面定义过显示屏的感念）上，可以点1位数字，也可以点多位，都会显示到第二块显示屏上

            △ 可以点 + - × ÷ 任意一个按钮，点完之后会把第一个数值 和 符号显示到 第一行显示屏上，例如 55 + 

            △ 接下来就是比较颠覆我们小学知识的操作，上过小学的都知道， 1 + 1 = 2  但是这个windows显示器呢，你可以 1 + = ，结果会是2

            △ 结果这个2呢，会显示到第二行的显示屏上，第一行显示屏现在显示的是 1 + 1 =  ，如下图

            △ 以此类推，+ - × ÷ 都是这么个操作过程

            △ 比如先点2， 再点+，再点6， 再点符号，相当于点了=号，

            △ 好乱套

    2、逻辑分析

            ☆ 第一行显示屏，由于是一个字符串，所以只能用来显示，万万不可用来参与计算

            ☆ 第二行显示屏，也是用来显示用的，我们每点击一下按钮，符号，还是数字都应该存在一个变量里

            ☆ 准备一个变量，resultNum 用来存储每次的最终得值

            ☆ 准备一个变量，firstNum 用来存储每次计算符号前面的数值， 比如 11 + 25  =  这个里面的11 这个值

            ☆ 准备一个变量，lastDo 用来存储每次点击的运算符号，也就是 + - × ÷ ，没点击一次运算符号，把lastDo的值更新一次，保证每次运算的符号是最后一次点击的那个符号

            ☆ 准备一个变量，secondNum 用来存储每次计算符号后面的数值，比如11 + 25 = 这个里面的25这个值

    3、初始化代码

    代码中已经添加了注释，这里就不细说了

    1. <script>
    2.    // 这是第一行显示屏
    3.    var value1Dom = document.querySelector('#valueDom1');
    4.    // 这是第二行显示屏
    5.    var value2Dom = document.querySelector('#valueDom2');
    6.    // 这是所有的按钮 + - × ÷ = C
    7.    var btns = document.querySelectorAll('.count-btns div');
    8.    // 初始化的时候第二行显示屏显示0
    9.    value2Dom.innerText = 0;
    10.    // 定义每次计算结果值
    11.    var resultNum = 0;
    12.    // 定义每次点击的运算符号
    13.    var lastDo = '';
    14.    // 定义计算过程中第1个值
    15.    var firstNum = 0;
    16.    // 定义计算过程中第2个值
    17.    var secondNum = 0;
    18. script>

    3、按钮点击事件循环

    1. // 开始对按钮进行循环遍历
    2. for (var i=0;ilength;i++) {
    3.     // 给每个按钮添加点击事件
    4.     btns[i].onclick = function() {
    5.        // 获取点击按钮的内容值 例如数字 或是符号
    6.        var value = this.innerText;
    7.        switch(value) {
    8.          case '+':
    9.                  
    10.                break;
    11.          case '-':
    12.                
    13.                break;
    14.          case '×':
    15.                
    16.                break;
    17.          case '÷':
    18.                
    19.                break;
    20.          case 'C':
    21.                           
    22.                break;
    23.          case '=':
    24.                            
    25.                break;
    26.          default:
    27.                   
    28.      }
    29. }

    四、计算过程

    1、存储和显示第一个数字

            我们刚才说过，第二行显示屏只是用于显示，而真正需要计算的数值需要存储在firstNum中。这个如何实现呢，数字可以一直按，按一个5就是5，按一个5按一个8就是58.所以，只要我们检测到，只要是lastDo没有被存储过计算符号，都算是第一个数字

    1. // 开始对按钮进行循环遍历
    2. for (var i=0;ilength;i++) {
    3.     // 给每个按钮添加点击事件
    4.     btns[i].onclick = function() {
    5.        // 获取点击按钮的内容值 例如数字 或是符号
    6.        var value = this.innerText;
    7.        switch(value) {
    8.          case '+':
    9.                lastDo = value; // 这里存储的 + 
    10.                break;
    11.          case '-':
    12.                lastDo = value; // 这里存储的 - 
    13.                break;
    14.          case '×':
    15.                lastDo = value; // 这里存储的 ×
    16.                break;
    17.          case '÷':
    18.                lastDo = value; // 这里存储的 ÷ 
    19.                break;
    20.          case 'C':
    21.                lastDo = ''; // 点击清空的时候，清空所有
    22.                value1Dom.innerText = ''; // 第一行显示屏
    23.                value2Dom.innerText = 0; // 第二行显示屏归0
    24.                resultNum = 0; // 最终计算值清零
    25.                firstNum = 0; // 第一个计算值清零
    26.                secondNum = 0; // 第二个计算值清零
    27.                break;
    28.          case '=':
    29.                         
    30.                break;
    31.          default:
    32.                   
    33.      }
    34. }

            从这段代码可知，没点击一下计算符号，点的是 + ，就把lastDo赋值为+ ，点的是 × ，就为lastDo 赋值为  ×， 一旦点击了按钮C，清空一切。那么就开始给第一个firstNum赋值

            刚才说过只要不点击4个运算符号，点击的就是第一个数字

            所以这里的代码应该写到default分支里，这里接收的是点击数字的值

    1. // default分支接收点击数字
    2. default:
    3.     // 只要没有lastDo 就证明在点击第1个数值
    4.     if (!lastDo) {
    5.          // 这次这里过来的value数字是字符串类型的
    6.          // 字符串类型的会向后追加，不是相加
    7.          firstNum += value;
    8.          // 为了便于后续相加计算，将firstNum转为数值型
    9.          firstNum = Number(firstNum);
    10.          // 从第一个值开始点，就已经要给resultNum赋值了
    11.          // 这个resultNum就是实时得到最终结果的那个值
    12.          resultNum = firstNum;
    13.          // 将追加的内容显示在第二行显示屏上
    14.          value2Dom.innerText = firstNum;
    15.     }

            输入一个234试试，如下图：

    2、点击加号的逻辑

            一旦点击了加号，第一行显示屏就会有所变化，因为第一行显示屏是要显示实时的计算过程的。例如刚刚点击的234，这时点了+号，第一行显示屏就会 显示 234 + 

            所以这段代码应该写到 case '+':的分支处

            既然都说了显示屏只用来显示，为什么这里要一直拿着resultNum进行显示呢，因为在windows计算器中，中间的运算符号是加号，第一行就要显示加号，如果又点击了减号，这里就要再显示减号

    1. case '+':
    2.     lastDo = value;
    3.     // 因为resultNum在最开始点击就参与了计算
    4.     // 保证这里可以在第一行显示完整
    5.     value1Dom.innerText = resultNum + value;
    6.     break;

    3、存储和显示第2个数字

            既然刚才说运算符号前面的都算第1个数字，那么运算符号后面的就算第2个数字呗。逻辑和第1个数字差不多

            这里需要修改刚刚的default分支的逻辑代码

    1. default:
    2.     if (!lastDo) {
    3.         firstNum += value;
    4.         firstNum = Number(firstNum);
    5.         resultNum = firstNum;
    6.         value2Dom.innerText = firstNum;
    7.      } else {
    8.         secondNum += value;
    9.         secondNum = Number(secondNum);
    10.         value2Dom.innerText = secondNum;
    11.      }

    4、等号的逻辑

            最初的需求分析中说过，如果点了第一个数字，再点加号，那么如果再直接点等号，就是 

            resultNum += firstNum 的逻辑

            如果点了加号，再点第二个数字，那么就是

            resultNum = firstNum + secondNum 的逻辑，但是刚才说过，其实从点击第一个数字开始的时候，就开始不断通过firstNum给resultNum累加值了，所以其实可以写成

            resultNum += secondNum 的逻辑

            所以这里的代码应该写在case '=' 的分支处

    1. case '=':
    2.      // 因为是计算，检测到没有运算符号不能计算
    3.      if (!lastDo) {
    4.         // break 就是停止继续执行代码的意思
    5.         return;
    6.      }
    7.      // 当判断最后一次点击的运算发号是加号，
    8.      // 后续还可以继续做else判断，或者继续用switch case的写法
    9.      if (lastDo === '+') {
    10.         if (secondNum) {
    11.            resultNum += secondNum;
    12.         } else {
    13.            resultNum += firstNum;
    14.         }
    15.         // 这是第一行显示屏
    16.         // 可以结合执行结果看每个值都是什么
    17.         value1Dom.innerText = resultNum + lastDo + secondNum + value;
    18.         // 执行的最后结果要显示到第二行显示屏
    19.         value2Dom.innerText = resultNum;
    20.      }
    21.      break;

    至此，加号的逻辑已经写完了

    5、其他符号

            相信如果看明白了加法的逻辑，其他减法，乘法，除法的逻辑也可以对应的进行修改代码了。

            学习软件开发，不管是什么语言，看代码不是最重要的，而是要不断的写，不断的练，练自己对基本写法的熟练，练自己的基本逻辑思维。只有基础稳固了，才能去完成企业的需求，才可以走的更远。

          有需要的私信联系我哦

  • 相关阅读:
    VL106 是一款高度集成的单芯片 DisplayPort Alt 模式和 USB 供电 3.0 控制器
    Vue - 实现任意内容展开 / 收起功能组件（支持自定义高度、动态展开与折叠、自定义展开与收起文案、动态增删数据自动计算高度、过渡动画等）
    2023国赛数学建模B题思路分析 - 多波束测线问题
    数仓建模详解及示例代码
    MySQL迁移表分区【图文教程】
    SpringBoot自动配置原理及启动流程
    时间管理类书籍阅读笔记
    看看redis的数据结构你都知道哪些
    多线程（2）
    基于光流的视频插帧算法 TOFlow 解读教程
  • 原文地址：https://blog.csdn.net/xingyu_qie/article/details/127758399