使用JavaScript实现简易计算器

本资源是关于使用原生JavaScript制作简单计算器的教程，通过HTML构建用户界面，包括输入框和按钮，然后用JavaScript处理点击事件，实现基本的四则运算。 在网页开发中，JavaScript是一种非常重要的脚本语言，用于增加交互性和动态功能。在这个实例中，我们将使用JavaScript创建一个简单的计算器，它可以执行加、减、乘、除四种基本运算。首先，HTML代码用于定义计算器的界面结构，包括三个输入框（用于输入两个数字和选择运算符）以及一个显示结果的输入框和一个计算按钮。 HTML部分包含以下元素： 1. 输入框`<input type="text" id="inp1" value="">`，用于输入第一个数`X`。 2. 输入框`<input type="text" id="inp2" value="">`，用于输入运算符`F`。 3. 输入框`<input type="text" id="inp3" value="">`，用于输入第二个数`Y`。 4. 输入框`<input type="text" id="inp4" value="">`，id为`inp4`，用于显示计算结果`R`。 5. 计算按钮`<input type="submit" name="btn" id="btn" value="请计算">`，当用户点击时触发计算过程。 接着，JavaScript部分负责获取HTML元素，处理计算逻辑并更新结果显示。通过`getElementById`方法获取到各个输入框和按钮的引用，例如`var inpX1 = document.getElementById("inp1");`。接着，定义变量来存储输入的数值和结果，并在计算按钮被点击时执行函数： ```javascript result.onclick = function() { // 获取输入值 inpX = Number(inpX1.value); inpF = inpF1.value; inpY = Number(inpY1.value); // 根据运算符进行相应计算 switch (inpF) { case "+": sum = inpX + inpY; break; case "-": sum = inpX - inpY; break; case "*": sum = inpX * inpY; break; case "/": sum = inpX / inpY; break; default: alert("请输入加减乘除中的任意一个"); break; } // 显示结果 inpR.value = sum; } ``` 这段JavaScript代码的核心是`switch`语句，它根据用户输入的运算符执行相应的计算。如果用户输入了无效的运算符，将弹出警告消息。计算完成后，将结果`sum`赋值给显示结果的输入框`inpR.value`。 这个简单的计算器实例展示了JavaScript如何与HTML结合，实现用户交互，以及如何处理基本的数学运算。对于初学者来说，这是一个很好的练习项目，可以加深对JavaScript基础和DOM操作的理解。同时，这个基础可以进一步扩展，如添加错误检查、支持更多运算符或实现更复杂的计算功能。