使用js代码实现简易计算器功能。
时间: 2024-10-22 17:22:22 浏览: 16
在JavaScript中,你可以使用HTML结构创建一个简单的计算器界面,然后利用JavaScript事件监听和数学运算来实现基本的计算功能。下面是一个基础的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
.calculator {
width: 200px;
border: 1px solid #ccc;
padding: 10px;
}
input[type="number"], button {
width: 50px;
height: 50px;
margin: 5px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="number" id="display" disabled>
<button onclick="clearDisplay()">C</button>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<!-- ... 其他数字按钮 -->
<button onclick="calculate()">=</button>
</div>
<script>
let display = document.getElementById('display');
let currentNum = '';
function appendNumber(num) {
if (currentNum === '') {
display.value = num;
} else {
display.value += num;
}
}
function clearDisplay() {
display.value = '';
}
function calculate() {
try {
let result = eval(display.value);
display.value = result;
} catch (error) {
display.value = "错误";
}
}
</script>
</body>
</html>
```
在这个例子中,我们创建了一个包含数字键和等号的计算器,用户输入数字,点击相应的按钮添加到显示区域,清零则调用`clearDisplay()`,计算结果通过`eval()`函数计算(注意这可能导致安全问题,实际应用中应避免使用`eval()`)。
阅读全文