j avascript简易计算器代码
时间: 2024-09-25 11:16:44 浏览: 16
JavaScript简易计算器的代码通常包含HTML用于构建用户界面,以及JavaScript用于处理输入和计算结果。下面是一个简单的例子,它实现了基本的加减乘除功能:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
<style>
#calculator {
width: 200px;
padding: 15px;
border: 1px solid black;
}
button {
width: 40px;
height: 40px;
margin: 5px;
}
</style>
</head>
<body>
<div id="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="appendNumber('9')">9</button>
<button onclick="setOperator('+')">+</button>
<!-- ...继续添加其他数字按钮和运算符按钮 -->
</div>
<script>
let currentNumber = '';
let operator = '';
function appendNumber(num) {
currentNumber += num;
document.getElementById('display').value = currentNumber;
}
function setOperator(op) {
if (currentNumber !== '') {
performCalculation();
}
operator = op;
currentNumber = '';
}
function clearDisplay() {
currentNumber = '';
operator = '';
document.getElementById('display').value = '';
}
function performCalculation() {
let result = eval(currentNumber + operator);
document.getElementById('display').value = result;
currentNumber = String(result);
}
</script>
</body>
</html>
```
在这个例子中,用户通过点击数字或运算符按钮来输入表达式,`appendNumber` 和 `setOperator` 函数负责更新显示和运算符状态。当用户完成操作并按下等号或清除键时,会调用 `performCalculation` 来计算并显示结果。