JS实现加减-简易计算

 这个题目前一周左右在小红书刷到，想着就去就做一下，第一版因为思路不清晰，没有完整的实现功能。后来忙着改论文，就一直拖到现在。想着回去在看看这篇，发现已经找不到了。

 记录错误思路：

window.onload = function() {
    //实现一个简易的计算器
    //点击上面的按钮，要输入到输入框中
    btns = document.querySelectorAll('button')
    input = document.querySelector('input')
        //   var f = parseInt(2) + parseInt(8)
        // console.log(f);
    var arr = ''
        //对arr以+或者-为分隔符
    var arr1 = ''
    var arr2 = ''
    var a = ''
    var b = ''
        //判断arr里面是否有+，-来选择是加法还是减法
        //实现加法
    function add(a, b) {

        var c = parseInt(a) + parseInt(b)
        return c

    }
    // 实现减法
    function jian(a, b) {
        var c = parseInt(a) - parseInt(b)
        return c
    }
    for (i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function() {
            var r = this.innerHTML
            arr = arr + r
            input.value = arr
            console.log(arr);
            if (r == '=') {
                var panduan = arr.indexOf('+')
                var puand2 = arr.indexOf('-')
                if (panduan != -1 && puand2 == -1) {
                    arr1 = arr.split('+')
                    arr2 = arr1[1].split('=')
                    a = arr1[0]
                    b = arr2[0]
                    console.log(a)
                    console.log(b)
                    var result = add(a, b)
                    console.log(result);
                    input.value = arr + result
                } else if (panduan == -1 && puand2 != -1) {
                    arr1 = arr.split('-')
                    arr2 = arr1[1].split('=')
                    a = arr1[0]
                    b = arr2[0]
                    console.log(a)
                    console.log(b)
                    var result = jian(a, b)
                    console.log(result);
                    input.value = arr + result
                }

            } else if (r == 'C') {
                input.value = ''
            }

        })
    }
    //当按下+ = 实现加法   按下- = 实现减法  c 清空

    //只能实现两个数的相减或者相加且需要提前把思路想好，再动，而不是想一步实现一步
}

重新整理思路后实现功能：

参考(3条消息) js 自己实现字符串的数学运算_zhengzhengwang的博客-CSDN博客_js字符串公式计算那么只需要获得输入等号之前的字符串，就可以实现计算功能

window.onload = function() {
    //实现加减法-清除功能
    //等于之后即运算出结果后，按c或者 数字键就会重新输入或者清零
    //实现多个数的加减法

    //1、给每个按钮绑定相应的事件
    var numbers = document.querySelectorAll('.number')
    var ad = document.querySelector('.add')
    var minu = document.querySelector('.minus')
    var equa = document.querySelector('.equa')
    var clr = document.querySelector('.cl')
    var input = document.querySelector('input')
    var str = ''
    var flag = 1
    var b = []
    var btns = document.querySelectorAll('button')

    for (i = 0; i < numbers.length; i++) {
        numbers[i].addEventListener('click', fnnumber)
    }
    minu.addEventListener('click', fnminu)
    ad.addEventListener('click', fnadd)

    equa.addEventListener('click', fnequa)
    clr.addEventListener('click', fncl)

    //实现按下按钮的时候，改变按钮的border颜色，思考的是，那弹起要怎么恢复颜色呢？？----通过一个定时器来改变
    for (m = 0; m < btns.length; m++) {
        btns[m].addEventListener('click', function() {
            this.style.borderColor = 'orange'
            var _this = this //改变this的指向
            setTimeout(function() {
                //  console.log(this);//这里面的this指向的是全局的this，window对象，所以如果要使用外层的this，需要改变this的指向
                console.log(_this);
                _this.style.borderColor = ''
            }, [200])
        })
    }
    //2、定义函数


    function fnnumber() {
        if (flag == 1 || flag == 0) {
            str = str + this.innerHTML
            input.value = str
            flag = 0
        }

    }

    function fnadd() {
        if (flag == 0) {
            flag = 1
            input.value = str + this.innerHTML
            str = str + this.innerHTML
            b.push(str)
            console.log(b);
            console.log(str);
        }

    }

    function fnminu() {
        if (flag == 0) {
            flag = 1
            input.value = str + this.innerHTML
            str = str + this.innerHTML
            b.push(str)
            console.log(b);
        }
    }
    var result
    var nums = []
    const operate2 = ['+', '-']

    function fnequa() {
        if (flag == 0) {
            flag = 2
            input.value = str + this.innerHTML
            str = str + this.innerHTML
            b.push(str)
            result = b[b.length - 1]
            console.log(b);
            console.log(typeof(result)); // 12+34-23= 此时 还是一个字符串型   怎么把里面的加减等于的数据提取出来  //现在的问题就是要计算这个结果，因为是一个字符串，所以需要先分理处运算数和运算符再进行相应的计算
            let finalresult = 0
            getNums(result)
            finalresult = calc2(result)
            console.log(finalresult)
            input.value = str + finalresult
        }
    }

    function fncl() {
        if (flag == 2) {
            input.value = ''
            str = ''
            b = []
            flag = 1
            nums = []
        }

    }
    const calc2 = (str) => {
        let finalresult = 0
        let n = 0
        for (let i = 0; i < str.length; i++) {
            const element = str[i];
            if (operate2.indexOf(element) != -1) {
                if (element == '+') {
                    finalresult = nums[n] + nums[n + 1]
                    result = result.replace(nums[n] + '+' + nums[n + 1], '' + finalresult)
                    console.log(nums[n] + '+' + nums[n + 1], finalresult)
                    nums.splice(n, 2, finalresult)
                    n--
                } else if (element == '-') {
                    finalresult = nums[n] - nums[n + 1]
                    result = result.replace(nums[n] + '-' + nums[n + 1], '' + finalresult)
                    console.log(nums[n] + '-' + nums[n + 1], finalresult)
                    nums.splice(n, 2, finalresult)
                    n--
                }
                console.log(nums, 'nums2')
                n++
            }
        }
        return finalresult
    }
    const getNums = (str) => {
        str.replace(/(\d+)\1*/g, (item1, item2) => {
            nums.push(parseFloat(item2))
        })
    }

}

    
    
    
    
    
    




    

        1
        2
        3
        4
        +
        -
        =
        C
    
    

缺点：没有考虑前置加法和前置减法，。一开始只能先输入数字