首页用前端写一个简易计算器

用前端写一个简易计算器

时间: 2024-09-25 16:06:18 浏览: 37

在前端编写一个简易计算器，通常涉及到HTML、CSS和JavaScript。以下是简单的步骤： 1. **HTML结构**: 创建一个基本的HTML页面，包含两个输入框（用于显示数字），一个按钮布局（包括加减乘除等运算符按钮）以及一个结果显示区域。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <link rel="stylesheet" href="styles.css"> </head> <body> <input type="text" id="number1" placeholder="请输入第一个数字"> <input type="text" id="number2" placeholder="请输入第二个数字"> <div class="button-container"> <button onclick="add()">+</button> <button onclick="subtract()">-</button> <button onclick="multiply()">*</button> <button onclick="divide()">/</button> </div> <p id="result"></p> <script src="calculator.js"></script> </body> </html> ``` 2. **CSS样式** (styles.css): 为按钮添加一些样式，使其看起来像真正的计算器。 3. **JavaScript功能** (calculator.js): 在这里定义函数，根据点击的按钮执行相应的计算并更新结果。 ```javascript function add() { var num1 = parseFloat(document.getElementById('number1').value); var num2 = parseFloat(document.getElementById('number2').value); document.getElementById('result').innerText = num1 + num2; } function subtract() { // 类似上述函数，实现减法操作 } function multiply() { // 实现乘法 } function divide() { // 实现除法，注意处理除数为0的情况 } ```

阅读全文