Javascript 不用 eval 实现计算器功能

先来看下最终效果，鼠标点击数字、运算符，计算出结果。

布局采用的标签是 div ，下面是布局代码

<div id="show_course"></div>
    <div id="show_result">0</div>
    <div id="num_area">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>0</div>
        <div>+</div>
        <div>-</div>
        <div>*</div>
        <div>/</div>
        <div>=</div>
        <div style="width:302px;">RESET</div>
    </div>

样式代码如下：

 body,
html,
div {
    padding: 0px;
    margin: 0px;
}

body {
    padding: 40px 80px;
}

#show_result,#show_course {
    width: 292px;
    height: 20px;
    border: 1px solid #000;
    border-bottom:none;
    font-size:20px;
    padding: 5px;
}
#show_result{
    border-bottom:1px solid #000;
    border-top:none;
    height:40px;
    text-align: right;
    font-size: 34px;
    font-weight: bold;
}

#num_area {
    width: 303px;
    font-size: 26px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    border-left: 1px solid #000;
    overflow: hidden;
}

#num_area div {
    width: 100px;
    height: 50px;
    float: left;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    cursor: pointer;
}

接下来是js代码，不用 eval ( ) 函数的前提下：

//获取显示结果的div
var showResult = document.getElementById("show_result");
//获取显示过程的div
var showCourse = document.getElementById("show_course");
//获取所有的数字、运算符div
var divs = document.getElementById("num_area").getElementsByTagName("div");

//遍历div,给div添加点击事件
for (var i = 0; i < divs.length; i++) divs[i].onclick = clickHand;

//声明变量，数字1、数字2、运算符、bool用来控制给第几个数字赋值
var num1 = 0,
    num2 = "",
    symbol = "",
    value = "",
    bool = false,
    result = 0;

//点击事件
function clickHand() {
    //获取当前div的值
    value = this.innerHTML;
    //给第一个数字赋值
    if (!bool) {
        //判断是否为数字，如果是数字，就赋值给num1
        if (!isNaN(value)) {
            num1 += value;
            num1 = parseInt(num1);
            showResult.innerHTML = num1;
        } else {
            //将除了等号和reset之外的运算符赋值给symbol
            if (value !== "=" && value !== "RESET") {
                //bool用来控制给第一个数字赋值结束
                bool = true;
                symbol = value;
                value = "";
            }
        }
    } else {
        //给第二个数字赋值
        num2 += value;
        num2 = parseInt(num2);
        showResult.innerHTML = num2;
    }

    //当点击等号的时候，开始运算
    if (value === "=") {
        switch (symbol) {
            case "+":
                result = num1 + num2;
                break;
            case "-":
                result = num1 - num2;
                break;
            case "*":
                result = num1 * num2;
                break;
            case "/":
                result = num1 / num2;
                break;
        }

        //显示运算结果
        showResult.innerHTML = result;

        //运算完后，将变量值清空
        num1 = 0;
        num2 = "";
        symbol = "";
        value = "";
        bool = false;
    }

    //点击reset，将变量值清空
    if (value === "RESET") {
        num1 = 0;
        num2 = "";
        symbol = "";
        value = "";
        bool = false;
        showResult.innerHTML = "0";
    }

    //显示运算的过程
    showCourse.innerHTML=num1+symbol+num2;
    // console.log(num1, ",", symbol, ",", num2, ",", result, ",", bool);

到此就实现了计算器的功能，不足的是全篇中只有一个函数，没有把功能分开。只是分享给大家实现的思路吧。

更新了一篇，将功能函数分开来写了，https://blog.youkuaiyun.com/Charissa2017/article/details/103765350