jquery实现计算器功能
时间: 2023-11-18 22:46:40 浏览: 111
jQuery实现的简单在线计算器功能
可以使用jQuery编写计算器功能。首先,需要在HTML中创建一个表单元素来包含计算器的各个按钮和显示结果的区域。然后,在JavaScript中编写代码来处理按钮的点击事件和计算结果。下面是一个简单的jQuery计算器实现示例:
HTML代码:
```
<form>
<input type="text" id="result" readonly>
<br>
<input type="button" value="1" onclick="addNumber(1)">
<input type="button" value="2" onclick="addNumber(2)">
<input type="button" value="3" onclick="addNumber(3)">
<input type="button" value="+" onclick="addOperator('+')">
<br>
<input type="button" value="4" onclick="addNumber(4)">
<input type="button" value="5" onclick="addNumber(5)">
<input type="button" value="6" onclick="addNumber(6)">
<input type="button" value="-" onclick="addOperator('-')">
<br>
<input type="button" value="7" onclick="addNumber(7)">
<input type="button" value="8" onclick="addNumber(8)">
<input type="button" value="9" onclick="addNumber(9)">
<input type="button" value="*" onclick="addOperator('*')">
<br>
<input type="button" value="0" onclick="addNumber(0)">
<input type="button" value="C" onclick="clearResult()">
<input type="button" value="=" onclick="calculate()">
<input type="button" value="/" onclick="addOperator('/')">
</form>
```
JavaScript代码:
```
var operator = "";
var operand1 = 0;
var operand2 = 0;
function addNumber(number) {
$("#result").val($("#result").val() + number);
}
function addOperator(op) {
operator = op;
operand1 = $("#result").val();
$("#result").val("");
}
function clearResult() {
$("#result").val("");
}
function calculate() {
operand2 = $("#result").val();
var result = eval(operand1 + operator + operand2);
$("#result").val(result);
}
```
该计算器的实现比较简单,只能处理简单的四则运算,具体效果可见此处:https://codepen.io/chenhj/pen/oNjyqQq。当然,如果需要更加复杂的计算器需求,需要更完善的设计和实现。
阅读全文