首页通过JavaScript实现简易计算器

通过JavaScript实现简易计算器

时间: 2024-10-24 07:17:43 浏览: 17

在JavaScript中，你可以创建一个简单的计算器功能，通常涉及到HTML界面、事件处理和基本的算术运算。下面是一个简单的步骤示例： 1. **HTML结构**: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> </head> <body> <input type="text" id="display" disabled> <div> <button onclick="addDigit('7')">7</button> <button onclick="addDigit('8')">8</button> <button onclick="addDigit('9')">9</button> <button onclick="performOperation('+')">+</button> </div>  <script src="calculator.js"></script> </body> </html> ``` 2. **JavaScript函数** (在`calculator.js`文件): ```javascript let display = document.getElementById('display'); let currentOperand = ''; function addDigit(num) { currentOperand += num; display.value = currentOperand; } function performOperation(op) { if (currentOperand === '') return; // 如果没输入数字，先清除操作数 let result = eval(currentOperand + op); // 使用eval计算结果，注意这可能有安全风险，实际项目中应避免直接使用eval display.value = result; currentOperand = String(result); } ``` 3. **其他运算符按钮函数** (添加更多的按钮和对应的`performOperation()`调用，例如减法、乘法、除法等，并处理小数点和等于号的操作)。

阅读全文