用js模拟计算器进行计算
今天我们来讲一下怎么使用js来模拟计算器的加减乘除基本运算。代码如下：
<h1>计算器</h1><inputtype="number"name=""id="num1"><br><inputtype="number"name=""id="num2"><br><buttononclick="func('+')">+</button><buttononclick="func('-')">-</button><buttononclick="func('*')">×</button><buttononclick="func('/')">÷</button><h2>结果：<spanid="res"></span></h2>
JavaScript代码：
/*设计思路：1.获取元素2.编写方法 + - * /3.获取两个输入框的值4.调用方法*/// 声明全局变量 储存计算结果varres; // 1.获取元素varoNum1=document.getElementById("num1"); varoNum2=document.getElementById("num2"); varaBtns=document.getElementsByTagName("button"); //数组varoText=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.编写方法 将不同的操作类型作为参数functionfunc(x) { // 3.获取两个输入框的值varoVal1=Number(oNum1.value); varoVal2=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 表达式或要执行的语句。 |
视频讲解链接：
1.https://www.bilibili.com/video/BV1na4y1e7Me/
