简单的原生JS计算器

无聊，看视频的时候看到算数，于是心血来潮打算写个计算器来玩玩。
想了一下，决定用原生JS写，功能也不需要太复杂，就简单的加、减、乘、除计算。界面偷懒了，网上直接找了一个现成的，然后改了一下，自己写JS。
效果图：

Paste_Image.png

思路：
1.获取DOM对象
2.遍历按钮，并添加点击事件，获取点击按钮的文本信息
3.判断点击除了非数字按钮时的事件
4.判断计算值的先后顺序
5.将上次计算的结果保存下来，用作进行下次计算的值

实现：
1.getElementsByTagName获取DOM对象
2.innerText获取按钮的文本信息
3.利用for循环遍历获取的DOM对象，并添加onclick事件
4.点击非数字按钮前输入的数值为第一个数值，点击符号后输入的数值为第二个数值，点击“=”时，通过判断点击的符号调用不同的方法进行计算，将结果返回显示出来
5.设置一个变量存储计算的结果，如上次计算完毕后没有点击数字按钮，而是直接点击符号按钮，则将保存的结果赋值给第一个数值用于计算

html部分：

<div class="calculator">
    <div class="c_screen">
        <p></p>
    </div>
    <div class="c_btn_wrapper">
        <div class="c_row">
            <button class="c_func_btn">/</button>
            <button class="c_func_btn">*</button>
            <button class="c_func_btn">CE</button>
            <button class="c_func_btn">AC</button>
        </div>
        <div class="c_row">
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button class="c_func_btn">+</button>
        </div>
        <div class="c_row">
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button class="c_func_btn">-</button>
        </div>
        <div class="c_row">
            <button>1</button>
            <button>2</button>
            <button>3</button>

        </div>
        <button class="c_func_btn d">=</button>
        <div class="c_row">
            <button class="z">0</button>
            <button>.</button>
        </div>
    </div>
</div>

css部分：

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .calculator {
            width: 326px;
            height: 460px;
            margin: 80px auto;
            background-color: #368590;
            border-radius: 5px;
            box-shadow: 0 2px 15px black;
            overflow: hidden;
        }

        .calculator .c_screen {
            position: relative;
            width: 326px;
            height: 110px;
            background-color: #96a4c2;
            border-radius: 5px;
            box-shadow: inherit;
        }

        .calculator .c_screen > p {
            position: absolute;
            top: 50%;
            margin-top: -28px;
            width: 236px;
            text-align: center;
            word-break: break-all;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            padding: 10px 45px;
        }

        .calculator .c_row {
            margin: 0 23px;
        }

        button {
            cursor: pointer;
            width: 60px;
            height: 45px;
            margin: 20px 2px 0;
            border: 0px;
            border-radius: 5px;
            color: #fff;
            background-color: #2b2f5b;
            outline: none;
        }

        button::selection {
            color: #fff;
        }

        button:active {
            box-shadow: 0 0 5px 5px dodgerblue;
        }

        .c_func_btn {
            background: linear-gradient(to bottom, rgba(252, 156, 23, 1) 0%, rgba(247, 126, 27, 1) 100%);
        }
        .d{
            width: 60px;
            height: 110px;
            float: right;
            position: relative;
            bottom:66px;
            right:32px;
        }
        .z{
            width: 129px;
            height: 45px;
        }
    </style>

JS部分：

<script>
    var btnList = document.getElementsByTagName('button');
    var show = document.getElementsByTagName('p')[0];

    var symbolB = false;
    //记录符号
    var symbol = null;
    //记录a值，b值,记录结果,保存计算结果
    var aNum = 0, bNum = 0, result = 0, resultCookic = 0;

    for (var i = 0, len = btnList.length; i < len; i++) {

        btnList[i].onclick = function () {

            //结果
            if (this.innerText == '=') {
                console.log(aNum , bNum);

                if (symbol == '+') {
                    addition(aNum, bNum);
                } else if (symbol == '-') {
                    subtraction(aNum, bNum);

                } else if (symbol == '*') {
                    multiplication(aNum, bNum);

                } else if (symbol == '/') {
                    division(aNum, bNum);
                }
                console.log(result);
                resultCookic = result;
                result = 0;
                aNum = 0;
                bNum = 0;
                symbolB = false;

            }else{
                //初始化和归零
                if (this.innerText == 'AC') {
                    //初始化所有值
                    result = 0;
                    resultCookic = 0;
                    aNum = 0;
                    bNum = 0;
                    show.innerText = "";
                    return;
                } else if (this.innerText == 'CE') {
                    //初始化所有值
                    result = 0;
                    resultCookic = 0;
                    aNum = 0;
                    bNum = 0;
                    show.innerText = result;
                    return;
                } else if (this.innerText == '+' ||
                            this.innerText == '-' ||
                            this.innerText == '*' ||
                            this.innerText == '/'
                ) {
                    //如果点击了符号按钮，那么之后输入的值就是b值
                    //记录符号
                    symbol = this.innerText;
                    show.innerText = symbol;
                    symbolB = true;
                } else {
                    if (symbolB == false) {
                        aNum += this.innerText;
                        aNum = Number(aNum);
                        console.log(aNum);
                        show.innerText = aNum;
                    } else {
                        //如果计算完一次结果，再次点击符号按钮进行计算，就把上一次的计算结果赋值给a
                        if(aNum == 0 ){
                            aNum = resultCookic;
                        }
                        bNum += this.innerText;
                        bNum = Number(bNum);
                        console.log(bNum);
                        show.innerText = bNum;
                    }
                }
            }
        }
    }


    /**
     * 加法
     * @param a{number}
     * @param b{number}
     */
    function addition(a, b) {
        result = a + b;
        show.innerText = result;
    }

    /**
     * 减法
     * @param a{number}
     * @param b{number}
     */
    function subtraction(a, b) {
        result = a - b;
        show.innerText = result;
    }

    /**
     * 乘法
     * @param a{number}
     * @param b{number}
     */
    function multiplication(a, b) {
        result = a * b;
        show.innerText = result;
    }

    /**
     * 除法
     * @param a{number}
     * @param b{number}
     */
    function division(a, b) {
        result = a / b;
        show.innerText = result;
    }

</script>