原生JS：基于eval的简易计算器

eval()：

　　eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

简单的说，在使用eval函数时，参数为字符串形式，eval函数执行时，会解析这段字符串，不论这段字符串是一串简单的计算式还是一段复杂的代码，eval都会帮你计算这个参数。

 

本篇博客的简易计算器的实现就依靠于eval函数。

 

CSS代码：一段无比简单的css渲染。

        .display {
            width: 400px;
            height: 150px;
            background-color: rgb(236, 229, 236);


        }

        .display .firline {
            height: 50px;
            font-size: 30px;
            text-align: right;
            line-height: 150px;
            padding-right: 10px;
            box-sizing: border-box;
            letter-spacing: 2px;
        }

        .display .secline {
            height: 50px;
            font-size: 30px;
            text-align: right;
            line-height: 150px;
            padding-right: 10px;
            box-sizing: border-box;
        }

        .table {
            width: 400px;
            height: 500px;
            border: solid 1px rgb(22, 19, 19);
            text-align: center;
            font-size: 20px;

        }

        .symbol {
            background-color: orange;
            color: white;
        }

        .btn:active,
        .symbol:active {
            background-color: rgb(224, 224, 224);
            transition: .3s;
        }

2.原生JS代码

用table格式将计算器格式填充

<div class="warp">
        <div class="display">
            <div class="firline">


            </div>
            <div class="secline">

            </div>
        </div>
        <div class="keyboard">
            <table class="table" border="">
                <tr>
                    <td class="btn otherbtn" data-value='AC' id="AC">AC</td>
                    <td class="btn otherbtn" data-value='+/-' id="+/-">+/-</td>
                    <td class="btn otherbtn" data-value='%' id='%'>%</td>
                    <td class="symbol otherbtn btn" data-value='/'>/</td>
                </tr>
                <tr>
                    <td class="btn num" data-value='7'>7</td>
                    <td class="btn num" data-value='8'>8</td>
                    <td class="btn num" data-value='9'>9</td>
                    <td class="symbol btn" data-value='*'>*</td>
                </tr>
                <tr>
                    <td class="btn num" data-value='4'>4</td>
                    <td class="btn num" data-value='5'>5</td>
                    <td class="btn num" data-value='6'>6</td>
                    <td class="symbol btn" data-value='-'>-</td>
                </tr>
                <tr>
                    <td class="btn num" data-value='1'>1</td>
                    <td class="btn num" data-value='2'>2</td>
                    <td class="btn num" data-value='3'>3</td>
                    <td class="symbol btn" data-value='+'>+</td>
                </tr>
                <tr>
                    <td colspan="2" class="btn num" data-value='0'>0</td>
                    <td class="btn num" data-value='.'>.</td>
                    <td class="symbol btn" data-value='='>=</td>
                </tr>
            </table>
        </div>

    </div>

3.scrip部分

 

var btn = document.getElementsByClassName('btn');//首先获取到各个表格元素

for (var i = 0; i < btn.length; i++) {
            btn[i].addEventListener('click', function () {
                var dataValue = this.getAttribute('data-value')//此时不能使用btn[i].getAttribute()
                handleClick(dataValue)
            })
        }
//for循环遍历每个按钮，并挂上监听器。（这里不能使用foreach方法，因为document.getElementByClassName()获取到的是一个类数组的形式，并不是一个真的数组，所以无法使用foreach方法）

 注意：遍历btn，获取data-value属性时，不可以用btn[i].getAttribute语法！

原因：会触发undefined

为什么会触发underfined？我们先假设btn.length = 2

当i = 0时，i < btn.length符合条件，执行循环体，i++

当i = 1时，同样符合条件，执行循环体，i++

此时的i = 2，不符合条件，跳出循环！

而此时的btn[2]并未挂上click事件，所以不可以。

将获取到的data-value传入handleClick函数中，那么handleClick函数的作用是什么？

我们先写下这个函数：

var handleClick = function（value）{}

既然每个btn里的data-value都获取到并且挂上了点击事件，那么我们就需要进行data-value的判断

这时计算器上的按钮分为三类：

 

 

我将绿色部分名为为一次性计算符号，因为他们无需点击等号就能得出结果。

在此之前，我们先定义一个变量接收value值

var formula = ‘’

formula += value

这样我们就能将想要计算的式子添加到formula，再对foemula使用eval方法，就能得出结果！

具体代码如下：

var handleClick = function (value) {
            if (value == null) {
                return
            } else {
                if (value == '=') {
                    reasult = eval(formula)
                    backup = formula//此时可以先不看这行
                    secline.innerHTML = reasult

                    formula = ''//这个地方写formula.innerHTML就无法清空firline
                }
                formula += value
            }

可以看出，在value = ‘=’时，我们将用eval函数对formula中的字符串进行计算，将结果赋给一个新的变量reasult

为了能够在显示屏上显示，我们将formula和reasult使用.innerHTML写入页面。

 

 

 

 然后我们点击等号，便能得出结果：

 

 

接着我们去实现一次性计算符号的功能：

我们直接对三个符号挂监听写函数：

       document.getElementById('AC').addEventListener('click', function () {
            formula = ''
            reasult = 0
            firline.innerHTML = ''
            secline.innerHTML = 0
        })

 

        document.getElementById('%').addEventListener('click', function () {
            reasult = parseFloat(formula) / 100
            secline.innerHTML = reasult
        })

 

        document.getElementById('+/-').addEventListener('click', function () {

            // if(parseFloat(formula) > 0){
            //     reasult = '-' + formula
            // }else{
            //     reasult = Math.abs(formula)
            // }
            //无法获取是因为在点等号的时候将公式清零了，所以要将公式备份
            var v = parseFloat(backup)
            if (v > 0) {
                v = '-' + v
            } else {
                v = Math.abs(v)
            }
            firline.innerHTML = ''
            secline.innerHTML = v
        })

 完事儿