首页javascript设计一个用键盘输入两个整数变量的计算器，然后使用点击加减乘除四个按钮来计算答案

javascript设计一个用键盘输入两个整数变量的计算器，然后使用点击加减乘除四个按钮来计算答案

时间: 2024-10-20 18:13:41 浏览: 29

要设计一个简单的JavaScript计算器，可以使用HTML、CSS和JavaScript结合来实现。以下是一个基本的步骤和代码示例： 1. HTML结构： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style> .calculator { display: flex; flex-direction: column; } input[type=number] { width: 50px; margin-bottom: 10px; } button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; margin-right: 5px; } </style> </head> <body> <div class="calculator"> <input type="number" id="num1" placeholder="数字1"> <input type="number" id="num2" placeholder="数字2"> <button onclick="add()">+</button> <button onclick="subtract()">-</button> <button onclick="multiply()">*</button> <button onclick="divide()">/</button> <p id="result"></p> </div> <script src="script.js"></script> </body> </html> ``` 2. JavaScript功能（script.js文件）： ```javascript function add() { const num1 = parseFloat(document.getElementById('num1').value); const num2 = parseFloat(document.getElementById('num2').value); const result = num1 + num2; document.getElementById('result').innerText = `结果: ${result}`; } function subtract() { // 类似上面的函数，替换操作符 // ... } function multiply() { // 类似上面的函数，替换操作符 // ... } function divide() { // 类似上面的函数，注意处理除数为零的情况 // ... } ``` 在上述代码中，我们创建了两个输入框用于用户输入两个整数，以及四个按钮分别对应加、减、乘、除运算。每个按钮绑定了对应的JavaScript函数，这些函数会获取输入值并执行相应的计算，结果显示在页面上。

阅读全文