最简单的用js模拟计算器进行计算(初级)

用js模拟计算器进行计算

今天我们来讲一下怎么使用js来模拟计算器的加减乘除基本运算。代码如下：

HTML代码：

    <h1>计算器</h1>
    <input type="number" name="" id="num1">
    <br>
    <input type="number" name="" id="num2">
    <br>
    <button onclick="func('+')">+</button>
    <button onclick="func('-')">-</button>
    <button onclick="func('*')">×</button>
    <button onclick="func('/')">÷</button>
    <h2>结果：<span id="res"></span></h2>

JavaScript代码：

    /*
    设计思路：
    1.获取元素
    2.编写方法   + - * /
    3.获取两个输入框的值
    4.调用方法
    */

    // 声明全局变量   储存计算结果
    var res;
    // 1.获取元素
    var oNum1 = document.getElementById("num1");
    var oNum2 = document.getElementById("num2");
    var aBtns = document.getElementsByTagName("button"); //数组
    var oText = document.getElementById("res");


    // 2.编写方法   
    // 加法
    // aBtns[0].onclick = function () {
    //     // 2.获取两个输入框的值
    //     var oVal1 = Number(oNum1.value);
    //     var oVal2 = Number(oNum2.value);
    //     res = oVal1 + oVal2;
    //     console.log(res);
    //     oText.innerText = res;
    // }
    // 减法
    // aBtns[1].onclick = function () {
    //     // 2.获取两个输入框的值
    //     var oVal1 = Number(oNum1.value);
    //     var oVal2 = Number(oNum2.value);
    //     res = oVal1 - oVal2;
    //     console.log(res);
    //     oText.innerText = res;
    // }
    
    // 以下代码太啰嗦，需要重复使用，进行简化（封装）,如下：
    // 2.编写方法  将不同的操作类型作为参数
    function func(x) {
        // 3.获取两个输入框的值
        var oVal1 = Number(oNum1.value);
        var oVal2 = Number(oNum2.value);
        res = eval(oVal1 + x + oVal2);
        console.log(res);
        oText.innerText = res;
    }
    
    // 4.调用方法   为了方便直接将方法在HTML行内进行调用 
    // aBtns[0].οnclick=function(){
    //     func("+");
    // };

代码的实现过程中出现了一个问题，就是当我们将函数进行封装后，参数传进来，进行字符串的拼接，将不再对数值进行计算，而是直接进行字符串的拼接，所以需要用到eval()函数。

• eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
• 如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。

语法：

参数	描述
string	必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。