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

傷城~ 2023-03-12 09:22 17阅读 0赞

## 用js模拟计算器进行计算 ##

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

**HTML代码：**

**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 语句。

**语法：**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>string</td> 
   <td>必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。</td> 
  </tr> 
 </tbody> 
</table>

**视频讲解链接：  
1.https://www.bilibili.com/video/BV1na4y1e7Me/**