首页用JavaScript做一个简易计算器

用JavaScript做一个简易计算器

时间: 2024-09-29 17:13:58 浏览: 44

使用JavaScript创建一个简易的计算器，可以采用HTML结构作为界面，加上一些基本的CSS样式以及JavaScript处理用户的输入和计算操作。下面是一个简单的步骤说明： 1. **HTML结构**: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style> #calculator { width: 200px; margin: auto; } input[type=number] { width: 100%; margin-bottom: 5px; } button { width: 50%; padding: 5px 10px; font-size: 16px; } </style> </head> <body> <div id="calculator"> <input type="text" id="display" disabled> <button onclick="clearDisplay()">C</button> <button onclick="appendNumber(7)">7</button>   <button onclick="calculate()">=</button> </div> <script src="calculator.js"></script> </body> </html> ``` 2. **JavaScript (calculator.js)**: ```javascript let display = document.getElementById('display'); let currentOperand = ''; let previousOperand = ''; function appendNumber(num) { if (currentOperand !== '') { display.value += currentOperand; currentOperand = ''; } display.value += num; } function clearDisplay() { display.value = ''; currentOperand = ''; previousOperand = ''; } function calculate() { let result = eval(currentOperand + previousOperand); // 使用eval谨慎处理用户输入 display.value = result; currentOperand = result.toString(); previousOperand = ''; } ``` 这个例子中，`appendNumber`函数用于添加数字，`clearDisplay`用于清除当前显示和历史值，`calculate`函数则尝试通过`eval`函数计算输入表达式（注意，`eval`存在安全风险，在实际应用中应避免直接使用用户输入进行计算，这里只是为了简化示例）。

阅读全文