用javaScript代码实现简易计算器功能
时间: 2024-10-28 20:11:02 浏览: 32
javascript实现简易计算器功能
在JavaScript中,实现一个简单的计算器功能,可以利用HTML结构构建用户界面,结合JavaScript编写事件处理函数来处理用户的输入和计算。以下是一个基本的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
<style>
.calculator {
width: 200px;
margin: auto;
}
input[type=number] {
width: 40%;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<br>
<button onclick="clearDisplay()">C</button>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<!-- 添加其他数字按钮 -->
<button onclick="calculate()">=</button>
<button onclick="appendOperator('+')">+</button>
<button onclick="appendOperator('-')">-</button>
<!-- 添加其他运算符按钮 -->
</div>
<script>
let currentOperand = '';
const display = document.getElementById('display');
function appendNumber(num) {
if (currentOperand === '') {
display.value = num;
} else {
display.value += num;
}
}
function appendOperator(op) {
if (currentOperand !== '') {
display.value += op + ' ';
performCalculation();
currentOperand = display.value;
}
}
function clearDisplay() {
display.value = '';
currentOperand = '';
}
function performCalculation() {
try {
let result = eval(currentOperand);
display.value = result;
currentOperand = result.toString();
} catch (_) {
display.value = "Error";
}
}
// 当用户按下等号键时自动计算
function calculate() {
performCalculation();
}
</script>
</body>
</html>
```
在这个例子中,我们创建了一个简单的文本框和一些数字和运算符按钮,通过`onclick`事件监听器来触发相应的操作,如添加数字、删除当前值、执行计算等。注意,由于`eval()`函数的安全风险,这个例子只适用于教学目的,实际应用中应避免使用`eval()`。
阅读全文