js简单计算器代码
以下是一个简单的JavaScript计算器代码示例。这个计算器可以执行基本的加、减、乘、除运算。这个示例非常基础，并没有包含错误处理或输入验证。
HTML部分：
html复制代码<!DOCTYPE html> <html> <body> <h2>简单计算器</h2> <input id="num1" type="number" placeholder="输入第一个数字"> <input id="num2" type="number" placeholder="输入第二个数字"> <button onclick="add()">加</button> <button onclick="subtract()">减</button> <button onclick="multiply()">乘</button> <button onclick="divide()">除</button> <p id="result"></p> <script src="calculator.js"></script> </body> </html>
JavaScript部分 (calculator.js)：
javascript复制代码function getNumbers() { var num1 = document.getElementById('num1').value; var num2 = document.getElementById('num2').value; return [parseFloat(num1), parseFloat(num2)]; } function add() { var nums = getNumbers(); document.getElementById('result').innerHTML = "结果: " + (nums[0] + nums[1]); } function subtract() { var nums = getNumbers(); document.getElementById('result').innerHTML = "结果: " + (nums[0] - nums[1]); } function multiply() { var nums = getNumbers(); document.getElementById('result').innerHTML = "结果: " + (nums[0] * nums[1]); } function divide() { var nums = getNumbers(); if (nums[1] != 0) { document.getElementById('result').innerHTML = "结果: " + (nums[0] / nums[1]); } else { document.getElementById('result').innerHTML = "错误：除数不能为0"; } }
这个计算器从两个输入框中获取数字，然后当用户点击相应的按钮时，执行相应的运算并将结果显示在页面上。注意，parseFloat函数用于将输入的字符串转换为浮点数，以便进行数学运算。在除法运算中，我们还检查除数是否为零，以避免出现错误。
为了增强用户体验和计算器的功能，我们可以添加一些额外的特性，比如清除输入和结果的功能，以及处理非数字输入的情况。以下是一个改进版的简单计算器代码：
HTML部分：
html复制代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单计算器</title> <style> .calculator { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .buttons { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 10px; margin-top: 20px; } button { padding: 10px 20px; font-size: 16px; } </style> </head> <body> <div class="calculator"> <input type="number" id="num1" placeholder="输入第一个数字"> <input type="number" id="num2" placeholder="输入第二个数字"> <button onclick="clearFields()">清除</button> <div class="buttons"> <button onclick="add()">加</button> <button onclick="subtract()">减</button> <button onclick="multiply()">乘</button> <button onclick="divide()">除</button> </div> <p id="result"></p> </div> <script src="calculator.js"></script> </body> </html>
JavaScript部分 (calculator.js)：
javascript复制代码function getNumbers() { var num1 = parseFloat(document.getElementById('num1').value); var num2 = parseFloat(document.getElementById('num2').value); return [isNaN(num1) ? 0 : num1, isNaN(num2) ? 0 : num2]; } function add() { var nums = getNumbers(); showResult(nums[0] + nums[1]); } function subtract() { var nums = getNumbers(); showResult(nums[0] - nums[1]); } function multiply() { var nums = getNumbers(); showResult(nums[0] * nums[1]); } function divide() { var nums = getNumbers(); if (nums[1] !== 0) { showResult(nums[0] / nums[1]); } else { showResult("错误：除数不能为0"); } } function clearFields() { document.getElementById('num1').value = ''; document.getElementById('num2').value = ''; document.getElementById('result').innerHTML = ''; } function showResult(result) { document.getElementById('result').innerHTML = "结果: " + result; }
在这个改进版中，我们添加了一个“清除”按钮，用于清除输入框和结果。此外，getNumbers 函数现在会检查输入是否为数字。如果不是数字，它会返回0，从而避免在运算中出现NaN（非数字）结果。showResult 函数用于将结果显示在页面上，使得代码更加清晰和可维护。
这个计算器仍然非常基础，并且没有处理更复杂的错误情况或用户输入验证。在实际应用中，你可能需要添加更多的功能和错误处理来确保计算器的稳定性和用户体验。
