题解 | #简易计算器#运算逻辑详解

var Calculator = {
    init: function () {
        var that = this;
        if (!that.isInited) {
            that.isInited = true;
            // 保存操作信息
            // total: Number, 总的结果
            // next: String, 下一个和 total 进行运算的数据
            // action: String, 操作符号
            that.data = {total: 0, next: '', action: ''};
            that.bindEvent();
        }
    },
    bindEvent: function () {
        var that = this;
        // 请补充代码：获取 .cal-keyboard 元素
        var keyboardEl = document.querySelector(".cal-keyboard");
        keyboardEl && keyboardEl.addEventListener('click', function (event) {
            // 请补充代码：获取当前点击的dom元素
            var target = event.target;
            // 请补充代码：获取target的 data-action 值
            // var action = target.dataset.action;
            var action = target.getAttribute("data-action");
            // 请补充代码：获取target的内容
            var value = target.innerHTML;
            
            if (action === 'num' || action === 'operator') {
                that.result(value, action === 'num');
            }
        });
    },
    result: function (action, isNum) {
        var that = this;
        var data = that.data;
        console.log(action);
        console.log(data);

        /*
            情况1：按的是数字   (isNum)
                    考虑前一个(data.next)是不是也是数字呀~~是的话就拼接
                    是第一个数字噢~total要变为0啦！
            情况2：按清空      (action === '清空')
                    data为初始化状态
            情况3：按等于符号   (action === '=')
                    运算后 data.next data.action都清空
            情况4：连续按+-x÷符号   (!data.next)
                    去最后一个符号 data.action=action
            情况5：连续运算 没有按等号 例如2x3+6+3   (data.action)
                    运算后，清空data.next data.action等于下一个运算符
            清空6: 第一次运算和按了等于符号后的第一次运算    
                    data.total等于0或者是上一次等于号后的遗产
                    data.next清空 data.action等于当前运算符

        */
        if (isNum) {  //如果是数字的话
            //如果data.next是空的话 data.next就等于当前按的数字
            //否则不为空就说明连续按了好几次数字，等于字符拼接，例如6 2 2=> 622
            data.next = data.next === '0' ? action : (data.next + action);
            //在操作符不存在的情况下 例如在=符号过后，结果输出来，又重新按了一个数字，total就等于0 重头开始
            !data.action && (data.total = 0); //data.action(操作符号)=''，data.total还是0
        } else if (action === '清空') {   //是清空操作
            // 请补充代码：设置清空时的对应状态  
            data.total = 0;
            data.next = '';
            data.action = '';
        } else if (action === '=') {   //是等于符号 
            if (data.next || data.action) {   //data.next 和data.action 至少要有一个不为空
                data.total = that.calculate(data.total, data.next, data.action);
                data.next = '';
                data.action = '';
            }
        } else if (!data.next) {   //dara.next（上一个数）是空的 //连续按操作符的情况 +++---
            console.log("什么时候操作这里呀"); 
            data.action = action;  //那就收集操作符  
        } else if (data.action) {   //如果data.action还有的话  例如2x3+6+3类似情况
            data.total = that.calculate(data.total, data.next, data.action);  //把上一个计算了放进total
            data.next = '';
            data.action = action;     //等于这个操作符
        } else {           //data.next（上一个数）有数字，data.action却为空 （就是在等于符号后的情况）
            console.log("什么时候是兜底？");     
            data.total = +data.next || 0;   //tatal要不就为data.next，要不就变成0（第一次运算）
            data.next = '';
            data.action = action;
        }
    
        // 补充代码：获取 .origin-value 元素
        var valEl = document.querySelector(".origin-value");
        valEl && (valEl.innerHTML = data.next || data.total || '0');
    },
    calculate: function (n1, n2, operator) {    
        n1 = +n1 || 0;  //+号是的n1转number类型  //由于n1 n2 都有可能是空值 所以如果+n1为不存在 那么n1=0
        n2 = +n2 || 0;
        if (operator === '÷') {
            // 请补充代码：获取除法的结果
            return n2===0?0:Math.floor((n1/n2)*100)/100;
        } else if (operator === 'x') {
            // 请补充代码：获取乘法的结果
            return Math.floor((n1*n2)*100)/100;
        } else if (operator === '+') {
            // 请补充代码：获取加法的结果
            return Math.floor((n1+n2)*100)/100;
        } else if (operator === '-') {
            // 请补充代码：获取减法的结果
            return Math.floor((n1-n2)*100)/100;
        }
    }
};
Calculator.init();

测试代码

function test() {     
  Calculator.init();     
  Calculator.result('清空');     
  var n = Calculator.calculate(0.2, 0.4, '+');     
  var result = !!(n === 0.6);     
  return result; 
}
// console.log(test());