window.onload = function() {
    //實(shí)現(xiàn)一個(gè)簡(jiǎn)易的計(jì)算器
    //點(diǎn)擊上面的按鈕，要輸入到輸入框中
    btns = document.querySelectorAll('button')
    input = document.querySelector('input')
        //   var f = parseInt(2) + parseInt(8)
        // console.log(f);
    var arr = ''
        //對(duì)arr以+或者-為分隔符
    var arr1 = ''
    var arr2 = ''
    var a = ''
    var b = ''
        //判斷arr里面是否有+，-來(lái)選擇是加法還是減法
        //實(shí)現(xiàn)加法
    function add(a, b) {
 
        var c = parseInt(a) + parseInt(b)
        return c
 
    }
    // 實(shí)現(xiàn)減法
    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 = ''
            }
 
        })
    }
    //當(dāng)按下+ = 實(shí)現(xiàn)加法   按下- = 實(shí)現(xiàn)減法  c 清空
 
    //只能實(shí)現(xiàn)兩個(gè)數(shù)的相減或者相加且需要提前把思路想好，再動(dòng)，而不是想一步實(shí)現(xiàn)一步
}

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

window.onload = function() {
    //實(shí)現(xiàn)加減法-清除功能
    //等于之后即運(yùn)算出結(jié)果后，按c或者 數(shù)字鍵就會(huì)重新輸入或者清零
    //實(shí)現(xiàn)多個(gè)數(shù)的加減法
 
    //1、給每個(gè)按鈕綁定相應(yīng)的事件
    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)
 
    //實(shí)現(xiàn)按下按鈕的時(shí)候，改變按鈕的border顏色，思考的是，那彈起要怎么恢復(fù)顏色呢？？----通過(guò)一個(gè)定時(shí)器來(lái)改變
    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對(duì)象，所以如果要使用外層的this，需要改變this的指向
                console.log(_this);
                _this.style.borderColor = ''
            }, [200])
        })
    }
    //2、定義函數(shù)
 
 
    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= 此時(shí) 還是一個(gè)字符串型   怎么把里面的加減等于的數(shù)據(jù)提取出來(lái)  //現(xiàn)在的問(wèn)題就是要計(jì)算這個(gè)結(jié)果，因?yàn)槭且粋€(gè)字符串，所以需要先分理處運(yùn)算數(shù)和運(yùn)算符再進(jìn)行相應(yīng)的計(jì)算
            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))
        })
    }
 
}

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="comput.css" rel="external nofollow" >
    <script src="comput2.js"></script>
 
</head>
 
<body>
    <div class="box">
        <button class="number">1</button>
        <button class="number">2</button>
        <button class="number">3</button>
        <button class="number">4</button>
        <button class="add">+</button>
        <button class="minus">-</button>
        <button class="equa">=</button>
        <button class="cl">C</button>
    </div>
    <input type="text">
</body>
 
</html>