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

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元素，用来做为顶部第二行显示屏，表示当前点击数值，也表示点击等号后的运算结果

<div class="count-box">
   <div class="count-runing" id="valueDom1"></div>
   <div class="count-current" id="valueDom2"></div>
   <div class="count-btns">
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>+</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>-</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>×</div>
      <div>0</div>
      <div class="clear">C</div>
      <div class="equal">=</div>
      <div>÷</div>
   </div>
</div>

二、CSS样式控制

<style>
    html, body, * {
       margin: 0;
       padding: 0;
    }
    .count-box {
       margin: 100px;
       width: 289px;
       height: 280px;
       background: #CCC;
    }
    .count-runing {
       height: 36px;
       line-height: 36px;
       text-align: right;
       font-size: 16px;
    }
    .count-current {
       height: 36px;
       line-height: 36px;
       text-align: right;
       font-size: 24px;
    }
    .count-btns {
       background: #FFF;
       display: flex;
       flex-wrap: wrap;
    }
    .count-btns div {
       width: 70px;
       height: 50px;
       border: 1px solid #CCC;
       cursor: pointer;
       text-align: center;
       line-height: 50px;
    }
    .clear {
       background: blue;
    }
    .equal {
        background: red;
    }
</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、初始化代码

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

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

3、按钮点击事件循环

// 开始对按钮进行循环遍历
for (var i=0;i<btns.length;i++) {
    // 给每个按钮添加点击事件
    btns[i].onclick = function() {
       // 获取点击按钮的内容值 例如数字 或是符号
       var value = this.innerText;
       switch(value) {
         case '+':
                 
               break;
         case '-':
               
               break;
         case '×':
               
               break;
         case '÷':
               
               break;
         case 'C':
                          
               break;
         case '=':
                           
               break;
         default:
                  
     }
}

四、计算过程

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

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

// 开始对按钮进行循环遍历
for (var i=0;i<btns.length;i++) {
    // 给每个按钮添加点击事件
    btns[i].onclick = function() {
       // 获取点击按钮的内容值 例如数字 或是符号
       var value = this.innerText;
       switch(value) {
         case '+':
               lastDo = value; // 这里存储的 + 
               break;
         case '-':
               lastDo = value; // 这里存储的 - 
               break;
         case '×':
               lastDo = value; // 这里存储的 ×
               break;
         case '÷':
               lastDo = value; // 这里存储的 ÷ 
               break;
         case 'C':
               lastDo = ''; // 点击清空的时候，清空所有
               value1Dom.innerText = ''; // 第一行显示屏
               value2Dom.innerText = 0; // 第二行显示屏归0
               resultNum = 0; // 最终计算值清零
               firstNum = 0; // 第一个计算值清零
               secondNum = 0; // 第二个计算值清零
               break;
         case '=':
                        
               break;
         default:
                  
     }
}

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

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

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

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

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

2、点击加号的逻辑

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

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

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

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

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

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

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

default:
    if (!lastDo) {
        firstNum += value;
        firstNum = Number(firstNum);
        resultNum = firstNum;
        value2Dom.innerText = firstNum;
     } else {
        secondNum += value;
        secondNum = Number(secondNum);
        value2Dom.innerText = secondNum;
     }

4、等号的逻辑

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

        resultNum += firstNum 的逻辑

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

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

        resultNum += secondNum 的逻辑

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

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

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

5、其他符号

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

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

      有需要的私信联系我哦