使用js实现网页计算器
时间: 2024-03-25 11:41:41 浏览: 15
好的,这里给你提供一个简单的网页计算器的实现,你可以参考一下:
HTML 代码:
```
<div>
<input type="text" id="result" readonly>
</div>
<div>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="appendOperator('+')">+</button>
</div>
<div>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="appendOperator('-')">-</button>
</div>
<div>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="appendOperator('*')">*</button>
</div>
<div>
<button onclick="appendNumber('0')">0</button>
<button onclick="appendOperator('/')">/</button>
<button onclick="clearResult()">C</button>
<button onclick="calculate()">=</button>
</div>
```
JavaScript 代码:
```
let result = document.getElementById('result');
function appendNumber(num) {
result.value += num;
}
function appendOperator(operator) {
result.value += operator;
}
function clearResult() {
result.value = '';
}
function calculate() {
try {
result.value = eval(result.value);
} catch (error) {
result.value = 'Error';
}
}
```
这个计算器实现了加减乘除四种基本运算,以及清空和计算结果的功能。当用户点击数字键或运算符键时,会将对应的字符添加到文本框中;当用户点击计算键时,会计算表达式的值并显示在文本框中;如果表达式不合法,则显示 "Error"。