<!DOCTYPE html>
<html>
<head>
<title>简易计算器</title>
<style>
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
text-align: center;
background-color: whitesmoke;
}
.result {
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
}
.button {
margin-top: 10px;
width: 22%;
padding: 10px;
}
#display {
width: 90%;
height: 50px;
font-size: 30px;
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<h2>计算器</h2>
<input type="text" id="display" readonly>
<!-- <div class="result" id="result">0</div> -->
<button class="button" onclick="appendValue('7')">7</button>
<button class="button" onclick="appendValue('8')">8</button>
<button class="button" onclick="appendValue('9')">9</button>
<button class="button" onclick="appendOperator('/')">/</button>
<button class="button" onclick="appendValue('4')">4</button>
<button class="button" onclick="appendValue('5')">5</button>
<button class="button" onclick="appendValue('6')">6</button>
<button class="button" onclick="appendOperator('*')">*</button>
<button class="button" onclick="appendValue('1')">1</button>
<button class="button" onclick="appendValue('2')">2</button>
<button class="button" onclick="appendValue('3')">3</button>
<button class="button" onclick="appendOperator('-')">-</button>
<button class="button" onclick="appendValue('0')" style="width: 46%;">0</button>
<button class="button" onclick="appendValue('.')">.</button>
<button class="button" onclick="appendOperator('+')">+</button>
<button class="button" onclick="clearDisplay()" style="width: 46%;">C</button>
<button class="button" onclick="calculate()" style="width: 46%;">=</button>
</div>
<script>
let displayValue = '0';
let operator = '';
let operand = 0;
function updateDisplay() {
document.getElementById('display').value = displayValue;
}
function clearDisplay() {
displayValue = '0';
operator = '';
operand = 0;
updateDisplay();
}
function appendValue(value) {
if (displayValue === '0') {
displayValue = '';
}
displayValue += value;
updateDisplay();
}
function appendOperator(op) {
operator = op;
operand = parseFloat(displayValue);
displayValue = '0';
updateDisplay();
}
function calculate() {
const currentValue = parseFloat(displayValue);
let result = 0;
switch (operator) {
case '+':
result = operand + currentValue;
break;
case '-':
result = operand - currentValue;
break;
case '*':
result = operand * currentValue;
break;
case '/':
result = operand / currentValue;
break;
}
displayValue = result.toString();
operator = '';
operand = 0;
updateDisplay();
}
</script>
</body>
</html>This code implements a simple calculator, using JavaScript and HTML to build a basic user interface. The calculator interface consists of a display area for displaying user-entered numbers and calculation results, and a set of buttons for entering numbers, operators, and performing calculations.
Some variables are defined in the code to track user input and calculation status. Among them, the `displayValue` variable is used to store the number or calculation result currently entered by the user, the `operator` variable is used to store the currently selected operator, and the `operand` variable is used to store the previously entered number.
The function `updateDisplay()` is used to update the display area and display the value of `displayValue` in the text input box.
The function `clearDisplay()` is used to clear the display area and reset the calculator state. When the user clicks the "C" button, this function will reset the values of `displayValue`, `operator` and `operand` to their initial state.
The function `appendValue(value)` is used to append the number or decimal point clicked by the user to `displayValue` and update the display area.
The function `appendOperator(op)` is used to store the operator clicked by the user into the `operator` variable and reset the value of `displayValue` to its initial state.
The function `calculate()` is used to perform calculation operations. It performs corresponding operations on `operand` and `currentValue` based on the current operator, stores the result in `displayValue`, and updates the display area.
Finally, the user interacts with the calculator by defining buttons in HTML and calling these functions using the corresponding event handlers. Users can click buttons to enter numbers, operators and perform calculation operations, and the calculation results will be displayed in the display area in real time.