使用JavaScript代码完成计算器
时间: 2024-09-19 16:04:36 浏览: 26
使用JavaScript编写一个简单的计算器功能,可以创建一个HTML页面并结合JavaScript函数来实现加、减、乘、除操作。下面是一个基本示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
<style>
#calculator {
width: 200px;
margin: auto;
padding: 15px;
border: 1px solid black;
}
input[type=number], button {
width: 40%;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled>
<br><br>
<button onclick="clearDisplay()">清除</button>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="calculate('+')">+</button>
<br>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="calculate('-')">-</button>
<br>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="calculate('*')">*</button>
<br>
<button onclick="appendNumber('0')">0</button>
<button onclick="appendDecimal()">.</button>
<button onclick="calculate('/')">/</button>
<button onclick="calculateResult()">=</button>
</div>
<script>
let display = document.getElementById('display');
let currentOperation = '';
function appendNumber(number) {
display.value += number;
}
function appendDecimal() {
if (!display.value.includes('.')) {
display.value += '.';
}
}
function calculate(operation) {
currentOperation = operation;
display.value = '';
}
function calculateResult() {
try {
const result = eval(display.value);
display.value = result;
currentOperation = '';
} catch (error) {
display.value = "错误";
}
}
function clearDisplay() {
display.value = '';
currentOperation = '';
}
</script>
</body>
</html>
```
这个例子中,我们使用了HTML按钮和JavaScript事件处理函数来模拟计算器的功能。用户可以在文本框中输入数字,点击运算符来进行计算,并通过`eval()`函数获取结果。注意,由于安全原因,实际应用中不应直接使用`eval()`,这里只是为了简化演示。