js计算器代码加减乘除
Sure, here's a simple JavaScript code for a basic calculator that can handle addition, subtraction, multiplication, and division:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
input {
width: 50px;
}
</style>
</head>
<body>
<h2>Simple Calculator</h2>
<form id="calculatorForm">
<input type="text" id="result" disabled>
<br>
<button type="button" onclick="appendToResult('1')">1</button>
<button type="button" onclick="appendToResult('2')">2</button>
<button type="button" onclick="appendToResult('3')">3</button>
<button type="button" onclick="appendToResult('+')">+</button>
<br>
<button type="button" onclick="appendToResult('4')">4</button>
<button type="button" onclick="appendToResult('5')">5</button>
<button type="button" onclick="appendToResult('6')">6</button>
<button type="button" onclick="appendToResult('-')">-</button>
<br>
<button type="button" onclick="appendToResult('7')">7</button>
<button type="button" onclick="appendToResult('8')">8</button>
<button type="button" onclick="appendToResult('9')">9</button>
<button type="button" onclick="appendToResult('*')">*</button>
<br>
<button type="button" onclick="appendToResult('0')">0</button>
<button type="button" onclick="clearResult()">C</button>
<button type="button" onclick="calculateResult()">=</button>
<button type="button" onclick="appendToResult('/')">/</button>
</form>
<script>
function appendToResult(value) {
document.getElementById('result').value += value;
}
function clearResult() {
document.getElementById('result').value = '';
}
function calculateResult() {
try {
document.getElementById('result').value = eval(document.getElementById('result').value);
} catch (error) {
document.getElementById('result').value = 'Error';
}
}
</script>
</body>
</html>
This code creates a simple HTML page with buttons for digits 0-9 and operators (+, -, *, /). The appendToResult function appends the clicked button value to the result input field, the clearResult function clears the result, and the calculateResult function evaluates the expression in the input field using the eval function. Note that using eval can be a security risk if the input is not properly validated, so be cautious when using it in a production environment.
Certainly! Here's a continuation of the JavaScript code with some additional features, such as decimal point and parentheses support:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Calculator</title>
<style>
input {
width: 150px;
}
button {
width: 50px;
}
</style>
</head>
<body>
<h2>Advanced Calculator</h2>
<form id="calculatorForm">
<input type="text" id="result" disabled>
<br>
<button type="button" onclick="appendToResult('1')">1</button>
<button type="button" onclick="appendToResult('2')">2</button>
<button type="button" onclick="appendToResult('3')">3</button>
<button type="button" onclick="appendToResult('+')">+</button>
<br>
<button type="button" onclick="appendToResult('4')">4</button>
<button type="button" onclick="appendToResult('5')">5</button>
<button type="button" onclick="appendToResult('6')">6</button>
<button type="button" onclick="appendToResult('-')">-</button>
<br>
<button type="button" onclick="appendToResult('7')">7</button>
<button type="button" onclick="appendToResult('8')">8</button>
<button type="button" onclick="appendToResult('9')">9</button>
<button type="button" onclick="appendToResult('*')">*</button>
<br>
<button type="button" onclick="appendToResult('0')">0</button>
<button type="button" onclick="appendToResult('.')">.</button>
<button type="button" onclick="clearResult()">C</button>
<button type="button" onclick="calculateResult()">=</button>
<button type="button" onclick="appendToResult('/')">/</button>
<br>
<button type="button" onclick="appendToResult('(')">(</button>
<button type="button" onclick="appendToResult(')')">)</button>
</form>
<script>
function appendToResult(value) {
document.getElementById('result').value += value;
}
function clearResult() {
document.getElementById('result').value = '';
}
function calculateResult() {
try {
document.getElementById('result').value = eval(document.getElementById('result').value);
} catch (error) {
document.getElementById('result').value = 'Error';
}
}
</script>
</body>
</html>
Now, the calculator supports decimal points, and you can use parentheses for more complex expressions. Keep in mind that this is a basic example, and for a production calculator, you may want to implement additional validation and error handling to enhance its robustness.
